不會(huì)做動(dòng)畫的程序猿不是好的動(dòng)畫師（如何用css3動(dòng)畫做動(dòng)畫）

xeblog 發(fā)布于2021-11-11 16:55 / 2112人閱讀

摘要：一過渡一的作用二的屬性二和動(dòng)畫一動(dòng)畫序列書寫簡例二書寫簡例常用屬性簡寫屬性三完整動(dòng)畫簡例代碼三轉(zhuǎn)換一轉(zhuǎn)換縮放移動(dòng)旋轉(zhuǎn)設(shè)置元素轉(zhuǎn)換的中心點(diǎn)綜合性寫法二轉(zhuǎn)換三維坐標(biāo)系透視呈現(xiàn)位移旋轉(zhuǎn)一過渡一的作用如果你有一個(gè)盒子，他的體內(nèi)也有個(gè)小盒子。

“看清animation，transform， @keyframes，transition這四個(gè)的臉，以后這四個(gè)來了就是要做動(dòng)畫了，看好你們的網(wǎng)頁，除了這四個(gè)，誰管你們都不好使?！?/p>

一.transition（過渡）

（一）transition的作用

如果你有一個(gè)盒子，他的體內(nèi)也有個(gè)小盒子?，F(xiàn)在我們想把鼠標(biāo)放上去他就能變大。

<style>        .father {            width: 200px;            height: 200px;            background-color: pink;        }                .son {            width: 100px;            height: 100px;            background-color: skyblue;        }style><body>    <div class="father">        <div class="son">div>    div>body>

效果如下：

現(xiàn)在我們給他添加鼠標(biāo)放上去子盒子變大效果

<style>        .son:hover {            width: 160px;            height: 160px;        }style>

效果如下：

但是這樣是鼠標(biāo)放上去立刻變大，一點(diǎn)也不美觀。如果要有個(gè)從小變大就好了，此時(shí)我們就可以請(qǐng)出第一位大佬————transition

    .son {            width: 100px;            height: 100px;            background-color: skyblue;            transition: all 0.6s;        }

效果就變?yōu)椋?br />

這就是transition的作用,transition 屬性設(shè)置元素當(dāng)過渡效果

（二）transition的屬性

transition 屬性設(shè)置元素當(dāng)過渡效果，四個(gè)簡寫屬性為：
1.transition-property
2.transition-duration
3.transition-timing-function
4.transition-delay

其中他的復(fù)寫方式：
transition：transition-property transition-duration transition-timing-function transition-delay；

二.animation和@keyframes（動(dòng)畫）

動(dòng)畫基本使用

	先定義動(dòng)畫		用@Keyframes定義動(dòng)畫（類似定義類選擇器）	再animation調(diào)用動(dòng)畫

(一)@keyframes

@keyframes負(fù)責(zé)定義動(dòng)畫
要?jiǎng)?chuàng)建 CSS3 動(dòng)畫，你需要了解 @keyframes 規(guī)則。

@keyframes 規(guī)則是創(chuàng)建動(dòng)畫。
@keyframes 規(guī)則內(nèi)指定一個(gè) CSS 樣式和動(dòng)畫將逐步從目前的樣式更改為新的樣式。

1.動(dòng)畫序列

1.0%是動(dòng)畫的開始，100%是動(dòng)畫的結(jié)束。這樣的規(guī)則就是動(dòng)畫序列
2.在@Keyframes中規(guī)定某種css樣式。就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫效果
3.動(dòng)畫是使元素從一種樣式逐漸變化為另一個(gè)樣式的效果，可以改變?nèi)我舛鄠€(gè)樣式任意多的動(dòng)畫效果
4.請(qǐng)用百分比來規(guī)定變化發(fā)生的時(shí)間，或者使用關(guān)鍵詞from和to，等于0%和100%
5.動(dòng)畫序列可以做多個(gè)動(dòng)畫的狀態(tài)的變化Keyframe關(guān)鍵幀,里面的百分比要是整數(shù)，是整體時(shí)間劃分

2.書寫簡例

        @keyframes move {            /* 開始狀態(tài) */            0% {                transform: translate(0px);            }            /* 結(jié)束狀態(tài) */            100% {                transform: translate(500px, 0);            }        }

(二)animation

當(dāng)在 @keyframes 創(chuàng)建動(dòng)畫，把它綁定到一個(gè)選擇器，否則動(dòng)畫不會(huì)有任何效果。
指定至少這兩個(gè)CSS3的動(dòng)畫屬性綁定向一個(gè)選擇器：
規(guī)定動(dòng)畫的名稱
規(guī)定動(dòng)畫的時(shí)長

1.書寫簡例

 /* 動(dòng)畫名稱 */ animation-name: move; /* 持續(xù)時(shí)間 */animation-duration: 10s; /* 播放次數(shù) */ animation-iteration-count: infinite;

2.常用屬性

1.animation
2.animation-timing-function

3.簡寫屬性

一.語法：
animation:動(dòng)畫名稱持續(xù)時(shí)間運(yùn)動(dòng)曲線何時(shí)開始播放次數(shù) 是否反方向動(dòng)畫起始或者結(jié)束的狀態(tài)
二.注意：
1.簡寫屬性里面不包含animation-play-state屬性
2.暫停動(dòng)畫：animation-play-state：puased;經(jīng)常和鼠標(biāo)經(jīng)過等其他配合使用
3.想要?jiǎng)赢嬜呋貋矶皇侵苯犹貋恚篴nimation-direction:alternate;
4.盒子動(dòng)畫結(jié)束后，停在結(jié)束位置animation-fill-mode:forward
三.所以上面的簡例可以簡寫為：

 animation: move 10s infinite;

三.完整動(dòng)畫簡例代碼

    <div>div>

        @keyframes move {            /* 開始狀態(tài) */            0% {                transform: translate(0px);            }            /* 結(jié)束狀態(tài) */            100% {                transform: translate(500px, 0);            }        }                div {            width: 300px;            height: 300px;            background-color: pink;            /* 動(dòng)畫名稱 */            animation-name: move;            /* 持續(xù)時(shí)間 */            animation-duration: 10s;            /* 播放次數(shù) */            animation-iteration-count: infinite;        }

效果如下：

三.transform（轉(zhuǎn)換）

轉(zhuǎn)換（transform）是CSS3中具有顛覆性的特征之一，可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)、變形、縮放

（一）2D轉(zhuǎn)換

1.縮放：scale:

縮放，顧名思義，可以放大和縮小。只要給元素添加上了這個(gè)屬性就能控制它放大還是縮小。

1.語法：
transform:scale(x,y);
2.總結(jié)：
寬和高都放大一倍，相對(duì)于沒有放大
transform:scale(2,2) ：寬和高都放大了2倍
transform:scale(2) ：只寫一個(gè)參數(shù)，第二個(gè)參數(shù)則和第一個(gè)參數(shù)一樣，相當(dāng)于 scale(2,2)
transform:scale(0.5,0.5)：縮小

2.移動(dòng)：translate

2D移動(dòng)是2D轉(zhuǎn)換里面的一種功能，可以改變元素在頁面中的位置，類似定位。

1.語法：
transform: translate(x,y);
2.總結(jié)：
定義 2D 轉(zhuǎn)換，沿著 X 和 Y 軸移動(dòng)元素
translate中的百分比單位是相對(duì)于自身元素的 translate:(50%,50%);
translate類似定位，不會(huì)影響到其他元素的位置
對(duì)行內(nèi)標(biāo)簽沒有效果

3.旋轉(zhuǎn)：rotate

2D旋轉(zhuǎn)指的是讓元素在2維平面內(nèi)順時(shí)針旋轉(zhuǎn)或者逆時(shí)針旋轉(zhuǎn)。

1.語法：
transform:rotate(angle)
2.總結(jié)：
角度為正時(shí)，順時(shí)針，負(fù)時(shí)，為逆時(shí)針
默認(rèn)旋轉(zhuǎn)的中心點(diǎn)是元素的中心點(diǎn)

4.設(shè)置元素轉(zhuǎn)換的中心點(diǎn):transform-origin

1.語法:transform-origin:x y;
2.注意
注意后面的參數(shù)x和y是空格隔開
xy默認(rèn)轉(zhuǎn)換的中心點(diǎn)是元素的中心點(diǎn)（50% 50%）
還可以給x y設(shè)置像素或者方位名稱（top bottom left right center）

5.綜合性寫法

1.語法：transform:translate() rotate() scale()…

2.注意：
其順序會(huì)影響轉(zhuǎn)換的效果，先旋轉(zhuǎn)會(huì)改變坐標(biāo)軸方向
當(dāng)我們同時(shí)有位移和其他屬性等等時(shí)候，記得要將位移放在最前面
一個(gè)元素可以添加多個(gè)動(dòng)畫，逗號(hào)分割

（二）3D轉(zhuǎn)換

1.三維坐標(biāo)系

三維坐標(biāo)系其實(shí)就是指立體空間,立體空間是由3個(gè)軸共同組成的。

2.透視：perspective

1.在2d平面產(chǎn)生近大遠(yuǎn)小的視覺立體，但是只是效果二維的
2.如果想要在網(wǎng)頁產(chǎn)生3D效果需要透視（理解為3D物體投影在2D平面上）
3.透視我們也稱為視距，視距就是人的眼睛到視頻的距離
4.距離視覺點(diǎn)越近在電腦平面成像越大，越遠(yuǎn)成像越小
5.透視的單位是像素
6.透視寫在被觀察元素的父盒子上面的

3.3D呈現(xiàn):transfrom-style

控制子元素是否開啟三維立體空間
代碼給父級(jí)，但是影響的是子盒子

屬性：

4.3D位移：translate3d(x,y,z)

1.語法：

transform:translateX(…px)
transform:translateY(…px)
transform:translateZ(…px)
transform:translate3d(x,y,z)其中x,y,z分別指要移動(dòng)的軸的方向的距離
復(fù)寫：transform：translateX（） translateY（） translateZ（）

5.3D旋轉(zhuǎn)：rotate3d（x,y,z）

可以讓元素在三維平面沿著x軸，y軸，z軸或者自定義軸進(jìn)行旋轉(zhuǎn)

語法：
transform:rotateX(45deg)沿著x軸進(jìn)行旋轉(zhuǎn)
transform:rotateY(45deg)沿著y軸進(jìn)行旋轉(zhuǎn)
transform:rotateZ(45deg)沿著y軸進(jìn)行旋轉(zhuǎn)
transform:rotate3d(x,y,z,45deg)沿著自定義軸旋轉(zhuǎn)deg角度

其中transform:rotateX(45deg)沿著x軸進(jìn)行旋轉(zhuǎn)方向判斷參考左手手準(zhǔn)則

transform:rotateY(45deg)沿著y軸進(jìn)行旋轉(zhuǎn)判斷參考左手手準(zhǔn)則
此時(shí)大拇指的方向改為指向下，即y軸正方向

對(duì)動(dòng)畫的總結(jié)簡單的就寫到這里，希望對(duì)各位看客有用。喜歡的話一鍵三連，鼠標(biāo)動(dòng)一動(dòng)，每天有進(jìn)步。

云服務(wù)器 GPU云服務(wù)器 javafx做動(dòng)畫 css3動(dòng)畫高性能css3動(dòng)畫 html的動(dòng)畫特效

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/123061.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

xeblog

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

不會(huì)做動(dòng)畫的程序猿不是好的動(dòng)畫師（如何用css3動(dòng)畫做動(dòng)畫）

閱讀 2113·2021-11-11 16:55
程序員的算法趣題Q50: 完美洗牌

閱讀 3181·2021-10-11 10:58
歐盟委員會(huì)發(fā)布《在歐盟經(jīng)濟(jì)中開源軟硬件對(duì)技術(shù)獨(dú)立、競爭力和創(chuàng)新的影響研究報(bào)告》

閱讀 3060·2021-09-13 10:28
騰訊云服務(wù)器秒殺：新用戶2核4G、6M獨(dú)享、1499元/3年，企業(yè)用戶2核4G、5M獨(dú)享、1200元

閱讀 3996·2021-07-26 23:57
Node.js 配合 express 框架、mongodb 實(shí)踐 && [使用 T

閱讀 1042·2019-08-30 15:56
深入理解ES6之《ES7》

閱讀 1340·2019-08-29 13:15
中斷數(shù)組（every、some方法）

閱讀 1278·2019-08-26 18:18
VUE Error:if there's nested data,rowKey is re

閱讀 1284·2019-08-26 13:44

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！