當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

神奇的css3（2）动画

發布時間：2023/12/20 编程问答 20 豆豆

生活随笔收集整理的這篇文章主要介紹了神奇的css3（2）动画小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

四、Css3 2D動畫

1、2D 轉換方法

函數	描述
matrix(n,n,n,n,n,n)	定義 2D 轉換，使用六個值的矩陣。
translate(x,y)	定義 2D 轉換，沿著 X 和 Y 軸移動元素。
translateX(n)	定義 2D 轉換，沿著 X 軸移動元素。
translateY(n)	定義 2D 轉換，沿著 Y 軸移動元素。
scale(x,y)	定義 2D 縮放轉換，改變元素的寬度和高度。
scaleX(n)	定義 2D 縮放轉換，改變元素的寬度。
scaleY(n)	定義 2D 縮放轉換，改變元素的高度。
rotate(angle)	定義 2D 旋轉，在參數中規定角度。
skew(x-angle,y-angle)	定義 2D 傾斜轉換，沿著 X 和 Y 軸。
skewX(angle)	定義 2D 傾斜轉換，沿著 X 軸。
skewY(angle)	定義 2D 傾斜轉換，沿著 Y 軸。

2、轉換屬性

Property	描述	CSS
transform	適用于2D或3D轉換的元素	3
transform-origin	允許您更改轉化元素位置	3

3、形狀變換transform

可以實現元素的形狀、角度、位置等的變化。

1）rotate(); 以x/y/z為軸進行旋轉，默認為z

rotatex(), rotatey(), rotatez(), rotate3d(x, y, z, angle) x, y, z --->矢量

實例：

實例：鐘表擺盤

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>* {margin: 0;padding: 0;list-style: none;}.wrapper {position: relative;width: 200px;height: 200px;border: 1px solid black;margin: 100px auto;border-radius: 50%;}li{position: absolute;top: 0;left: 50%;transform: translateX(-50%);display: inline-block;transform-origin: 0 100px;}span{/* 必須先改成行級塊元素 */display: inline-block;}li:nth-of-type(2){transform: rotate(30deg);}li:nth-of-type(2) span{transform: rotate(-30deg);}li:nth-of-type(3){transform: rotate(60deg);}li:nth-of-type(3) span{transform: rotate(-60deg);}li:nth-of-type(4){transform: rotate(90deg);}li:nth-of-type(4) span{transform: rotate(-90deg);}li:nth-of-type(5){transform: rotate(120deg);}li:nth-of-type(5) span{transform: rotate(-120deg);}li:nth-of-type(6){transform: rotate(150deg);}li:nth-of-type(6) span{transform: rotate(-150deg);}li:nth-of-type(7){transform: rotate(180deg);}li:nth-of-type(7) span{transform: rotate(-180deg);}li:nth-of-type(8){transform: rotate(210deg);}li:nth-of-type(8) span{transform: rotate(-210deg);}li:nth-of-type(9){transform: rotate(240deg);}li:nth-of-type(9) span{transform: rotate(-240deg);}li:nth-of-type(10){transform: rotate(270deg);}li:nth-of-type(10) span{transform: rotate(-270deg);}li:nth-of-type(11){transform: rotate(300deg);}li:nth-of-type(11) span{transform: rotate(-300deg);}li:nth-of-type(12){transform: rotate(330deg);}li:nth-of-type(12) span{transform: rotate(-330deg);}</style></head><body><div class="wrapper"><ul><li><span>12</span></li><li><span>1</span></li><li><span>2</span></li><li><span>3</span></li><li><span>4</span></li><li><span>5</span></li><li><span>6</span></li><li><span>7</span></li><li><span>8</span></li><li><span>9</span></li><li><span>10</span></li><li><span>11</span></li></ul></div></body></html>

2）scale(); 以x/y為軸進行縮放

scale(x, y) 接受兩個值，如果第二參數未提供，則第二個參數使用第一個參數的值

scalex(),scaley()值是數字表示倍數，不加任何單位，scale3d()，scale3d(sx,sy,sz)

實例：

3）skew(); 對元素進行傾斜扭曲

skew(x, y);接受兩個值，第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則默認值為0

skewx(), skewy()

4）translate(); 可以移動距離,相對于自身位置。

translate(x, [y])

translatex(),translatey(),translatez(),translate3d(x, y, z)

實例：

.item1{transform: translateX(100px);}.item2{transform: translateY(100px);}

實例：塊元素水平垂直居中顯示，元素寬高未知

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper{position: relative;width: 1000px;height: 600px;margin: 0 auto;border: 1px solid black;}.box{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);border: 1px solid red;}</style></head><body><div class="wrapper"><div class="box">你好</div></div></body></html>

4、transform-origin 變換原點

任何一個元素都有一個中心點，默認情況下，其中心點是居于元素x軸和y軸的50%處，如圖：

也可以取下述值：

5、transition：過渡動畫

語法：transition：ele time function delay；

?transition? 屬性是css3的一個復合屬性，主要包括一下幾個子屬性

transition-property:指定過渡或動態模擬的css屬性

transition-duration:指定過渡所需要的時間

transition-timing-function:指定過渡函數

transition-delay:指定開始出現的延遲時間

下列為過渡動畫可以參與過渡的屬性：

transition? 速錄函數可以選擇的值:

實例：

實例：點擊具體item切換顯示圖片

6、動畫animation???

?animation 屬性為css3的復合屬性，主要包括以下子屬性

1)animation-name:? 此屬性為執行動畫的 keyframe 名

2)animation-duration: 此屬性為動畫執行的時間

3)animation-timing-function: 指定過渡函數速率

4)animation-delay: 執行延遲時間

5)animation-direction: normal/reverse/alternate/alternate-reverse;

（要用來設置動畫播放方向：normal：默認值。動畫按正常播放。reverse：動畫反向播放。alternate：動畫在奇數次（1、3、5...）正向播放，在偶數次（2、4、6...）反向播放。alternate-reverse：動畫在奇數次（1、3、5...）反向播放，在偶數次（2、4、6...）正向播放。）

6)animation-iteration-count:infinite/number;

（主要用來定義動畫的播放次數。n 播放次數，infinite 無限次）

7)animation-fill-mode: none/forwards/backwards;

（定義在動畫開始之前和結束之后發生的操作。主要具有四個屬性值：none:默認值，表示動畫將按預期進行和結束，在動畫完成其最后一幀時，動畫會反轉到初始幀處。forwards: 表示動畫在結束后繼續應用最后的關鍵幀的位置。backwards:會在向元素應用動畫樣式時迅速應用動畫的初始幀。both:元素動畫同時具有forwards和backwards效果）

8)animation-play-state:runing/pasued;

（主要用來控制元素動畫的播放狀態。running 播放，paused? 暫停）

7、關鍵幀@keyframes

animation 動畫會按照keyframes 關鍵幀里面指定的幀狀態而過渡執行。

0% - 100% 代表動畫的時間過渡

@keyframes demoMove{

0%{ background-color:red;}

10%{ background-color:green;}

20%{ background-color:white;}

50%{ width:200px;}

100%{ height:200px;}

}

幀頻里面如果只有 0% 和 100%兩個關鍵幀，那么可以用 from to 代替

@keyframes demoMove{

from{ background-color:red;}

to{ height:200px;}

}

實例：方塊運動

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper {position: relative;width: 300px;height: 300px;margin: 0 auto;border: 1px solid black;}.demo {position: absolute;left: 0;top: 0;width: 100px;height: 100px;background: red;animation: move 4S linear infinite;}@keyframes move {25% {left: 200px;top: 0;background: green;}50% {left: 200px;top: 200px;background: pink;}75% {left: 0;top: 200px;background: blue;}100% {left: 0;top: 0;background: red;}}</style></head><body><div class="wrapper"><div class="demo" id="demo"></div></div></body></html>

實例：網頁云音樂轉盤

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>*{padding: 0;margin: 0;}.wrapper{position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);/* border: 1px solid black; */}button{position: absolute;left: 50%;transform: translateX(-50%);bottom: 150px;color: #fff;font-size: 20px;padding: 15px;background: red;}.table{width: 200px;height: 200px;border: 50px solid black;border-radius: 50%;animation: turn 5s linear infinite paused;background: url('./dog1.jpg');background-size: 100% 100%;}.pian{position: absolute;left: 50%;top: -70px;transform: translateX(-50%);width: 10px;height: 150px;background: orchid;border-bottom-left-radius: 100%;border-bottom-right-radius: 100%;transform-origin: top;transform: rotate(-60deg);}.active{transform: rotate(-30deg);}@keyframes turn{0%{transform: rotate(0deg);}100%{transform: rotate(360deg);}}</style></head><body><button id = "btn">播放/停止</button><div class="wrapper"><div class="table"></div><div class="pian"></div></div><script>var oTable = document.getElementsByClassName('table')[0];var oPian = document.getElementsByClassName('pian')[0];var flag = true;btn.onclick = function(){if(flag){flag = false;oTable.style.animationPlayState = "running";oPian.className = "pian active"}else{oTable.style.animationPlayState = "paused";oPian.className = "pian"flag = true;}}</script></body></html>

五、Css3 3D動畫

1、3D轉換方法

函數	描述
matrix3d(n,n,?n,n,n,n?, n,n,n?,n,n,n,?n,n,n,n?)	定義 3D 轉換，使用 16 個值的 4x4 矩陣。
translate3d(x,y,z)	定義 3D 轉化。
translateX(x)	定義 3D 轉化，僅使用用于 X 軸的值。
translateY(y)	定義 3D 轉化，僅使用用于 Y 軸的值。
translateZ(z)	定義 3D 轉化，僅使用用于 Z 軸的值。
scale3d(x,y,z)	定義 3D 縮放轉換。
scaleX(x)	定義 3D 縮放轉換，通過給定一個 X 軸的值。
scaleY(y)	定義 3D 縮放轉換，通過給定一個 Y 軸的值。
scaleZ(z)	定義 3D 縮放轉換，通過給定一個 Z 軸的值。
rotate3d(x,y,z,angle)	定義 3D 旋轉。
rotateX(angle)	定義沿 X 軸的 3D 旋轉。
rotateY(angle)	定義沿 Y 軸的 3D 旋轉。
rotateZ(angle)	定義沿 Z 軸的 3D 旋轉。
perspective(n)	定義 3D 轉換元素的透視視圖。

2、轉換屬性

屬性	描述	CSS
transform	向元素應用 2D 或 3D 轉換。	3
transform-origin	允許你改變被轉換元素的位置。	3
transform-style	規定被嵌套元素如何在 3D 空間中顯示。	3
perspective	規定 3D 元素的透視效果。	3
perspective-origin	規定 3D 元素的底部位置。	3
backface-visibility	定義元素在不面對屏幕時是否可見。	3

3、transform-style

transform-style: flat|preserve-3d;

flat: 默認，子元素將不保留其 3D 位置

preserve-3d : 子元素將保留其 3D 位置。

注意：transform-style 屬性需要設置在父元素中, 高于任何嵌套的變形元素。設置了transform-style:preserve-3d的元素，就不能防止子元素溢出設置overflow：hidden；否則會導致preserve-3d失效。

4、perspective——景深?

以簡單的把perspective理解成人距離顯示器的距離，此值越大的效果越差，越小效果越好。假設你距離100米和1米的距離去看一個邊長一米的正方體。

重點記住perspective的值要大于3d物體的值。

①perspective: 600px ;默認值none：物體距離人眼的距離是600px;

實例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper{width: 200px;height: 200px;margin: 100px auto;border: 1px solid #333;transform-style: preserve-3d;/* perspective: 600px; */}.item{width: 200px;height: 200px;background: red;transform: rotateX(45deg);}</style></head><body><div class="wrapper"><div class="item"></div></div></body></html>

沒有景深：

有景深：

perspective: 600px;

②perspective-origin:默認值是50% 50%

實例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper{width: 200px;height: 200px;margin: 100px auto;border: 1px solid #333;transform-style: preserve-3d;perspective: 600px;/* 改變視角 */perspective-origin: top;}.item{width: 200px;height: 200px;background: red;transform: rotateX(90deg);}</style></head><body><div class="wrapper"><div class="item"></div></div></body></html>

當有多個變形元素時，把景深設置到父元素上時，只有一個透視點；把景深設置到子元素上時，每一個變形元素都有一個透視點。

實例：父元素設置景深

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper{width: 200px;height: 200px;margin: 100px auto;border: 1px solid #333;transform-style: preserve-3d;perspective: 600px;/* 改變視角 */perspective-origin: top;}.item{width: 200px;height: 200px;background: red;transform: rotateX(75deg);}</style></head><body><div class="wrapper"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div></body></html>

實例：子元素設置景深

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper{width: 200px;height: 200px;margin: 100px auto;border: 1px solid #333;transform-style: preserve-3d;/* 改變視角 */perspective-origin: top;}.item{width: 200px;height: 200px;background: red;transform: perspective(600px) rotateX(75deg);}</style></head><body><div class="wrapper"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div></body></html>

5、backface-visibility: visible | hidden

在元素運動過程中，能否展示元素的背面

實例：可見

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper{width: 200px;height: 200px;margin: 100px auto;border: 1px solid #333;transform-style: preserve-3d;/* 改變視角 */perspective-origin: top;}.item{width: 200px;height: 200px;background: red;transform: perspective(600px) rotateX(100deg);backface-visibility: visible;}</style></head><body><div class="wrapper"><div class="item"></div> </div></body></html>

實例：不可見

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper{width: 200px;height: 200px;margin: 100px auto;border: 1px solid #333;transform-style: preserve-3d;/* 改變視角 */perspective-origin: top;}.item{width: 200px;height: 200px;background: red;transform: perspective(600px) rotateX(100deg);backface-visibility: hidden;}</style></head><body><div class="wrapper"><div class="item"></div> </div></body></html>

6、3d變化是二人轉：元素在轉，坐標軸其實也在轉

兩個相同的元素, 其中一個設置了rotateX(90deg), 另一個設置rotateX(-90deg)，然后同時設置translateZ(100px)；這時, 他們在空間的距離是200px, 而不是0;

實例：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper {position: relative;width: 200px;height: 200px;margin: 100px auto;border: 1px solid #333;transform-style: preserve-3d;perspective-origin: center;perspective: 600px;}.item1 {position: absolute;top: 0;width: 200px;height: 200px;background: red;transform: rotateX(90deg) translateZ(100px);}.item2 {position: absolute;top: 0;width: 200px;height: 200px; background: green;transform: rotateX(-90deg) translateZ(100px);}</style></head><body><div class="wrapper"><div class="item1"></div><div class="item2"></div></div></body></html>

實例：旋轉照片墻

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper{position: relative;transform-style: preserve-3d;width: 200px;height: 200px;margin: 200px auto;animation: turn 4s linear reverse infinite;}.wrapper div{position: absolute;top: 0;left: 0;width: 200px;height: 180px;line-height: 200px;opacity: 0.5;text-align: center;color: #fff;font-size: 30px;background: red;}.wrapper .item1{background: red;transform: rotateY(0deg) translate3d(0,0,200px);}.wrapper .item2{background: green;transform: rotateY(60deg) translate3d(0,0,200px);}.wrapper .item3{background: orange;transform: rotateY(120deg) translate3d(0,0,200px);}.wrapper .item4{background: deepskyblue;transform: rotateY(180deg) translate3d(0,0,200px);}.wrapper .item5{background: deeppink;transform: rotateY(240deg) translate3d(0,0,200px);}.wrapper .item6{background: purple;transform: rotateY(300deg) translate3d(0,0,200px);}@keyframes turn{0%{transform: rotateX(-20deg) rotateY(0deg);}100%{transform: rotateX(-20deg) rotateY(360deg);}}</style></head><body><div class="wrapper"><div class="item1">1</div><div class="item2">2</div><div class="item3">3</div><div class="item4">4</div><div class="item5">5</div><div class="item6">6</div></div></body></html>

六、Css 3 動畫性能優化

1. 盡可能多的利用硬件能力，如使用3D變形來開啟GPU加速

注意：如動畫過程有閃爍（通常發生在動畫開始的時候），可以嘗試下面的Hack：

如下面一個元素通過translate3d右移500px的動畫流暢度會明顯優于使用left屬性:

注：3D變形會消耗更多的內存與功耗，應確實有性能問題時才去使用它，兼在權衡

2. 盡可能少的使用box-shadows與gradients, 這兩個都是頁面性能殺手，能避免盡量避免。

3. 盡可能的讓動畫元素不在文檔流中，以減少重排。

?4. 優化 DOM reflow

實例：立方體旋轉

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>.wrapper{position: relative;transform-style: preserve-3d;width: 200px;height: 200px;margin: 200px auto;animation: turn 5s linear infinite;}.wrapper div{position: absolute;top: 0;left: 0;width: 200px;height: 200px;line-height: 200px;opacity: 0.5;text-align: center;color: #fff;font-size: 30px;background: red;}.wrapper .item1{background: red;transform: rotateX(0deg) translate3d(0,0,100px);}.wrapper .item2{background: deepskyblue;transform: rotateX(180deg) translate3d(0,0,100px);}.wrapper .item3{background: green;transform: rotateY(90deg) translate3d(0,0,100px);}.wrapper .item4{background: orange;transform: rotateY(-90deg) translate3d(0,0,100px);}.wrapper .item5{background: deeppink;transform: rotateX(90deg) rotateZ(90deg) translate3d(0,0,100px);}.wrapper .item6{background: purple;transform: rotateX(-90deg) rotateZ(90deg) translate3d(0,0,100px);}@keyframes turn{0%{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}25%{transform: rotateX(90deg) rotateY(90deg) rotateZ(90deg);}50%{transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);}75%{transform: rotateX(270deg) rotateY(270deg) rotateZ(270deg);}100%{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}}</style></head><body><div class="wrapper"><div class="item1">1</div><div class="item2">2</div><div class="item3">3</div><div class="item4">4</div><div class="item5">5</div><div class="item6">6</div></div></body></html>

轉載于:https://www.cnblogs.com/wangzhenling/p/8989678.html

總結

以上是生活随笔為你收集整理的神奇的css3（2）动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。