前端學習筆記10

一、過渡屬性

過渡屬性 transition 是實現css動效的屬性。

transition: 屬性名稱 動畫持續時間 運動曲線 延遲時間;

我們可以來寫一下代碼：

div{width: 200px;height: 200px;background: skyblue;transition: height 2s linear 1s; } div:hover{height: 300px; }

如何單獨控制transition的某個屬性值：

transition-property transition-duration transition-timing-function transition-delay

如果我們鼠標移上元素，想要有多個屬性，如寬、高和背景都同時改變，顯然 transition-property 的值，就不能只寫一個屬性的名稱，而該寫 all，如：

transition: all 2s linear;

補充

多值寫法:

transition: height 2s linear, background 1s linear;

二、轉換屬性

轉換屬性 transform 可將元素進行旋轉、位移和縮放等轉換。

旋轉Rotate

transform: rotateX() rotateY() rotateZ();

值與值之間以空格隔開，單位為deg。

位移Translate

transform: translateX() translateY() translateZ();

值與值之間以空格隔開，單位為px。

縮放Scale

transform: scaleX() scaleY() scaleZ();

值為數值，值與值之間以空格隔開，無單位。

translate實現未知寬高的盒子居中

https://blog.csdn.net/mr_fzz/article/details/53081452

三、旋轉中心點和旋轉軸

我們可以通過 transform-origin 這個屬性配合旋轉來控制元素的旋轉中心點和旋轉軸。

配合Transform:rotate()做旋轉中心點的設置，兩個值，單位可以是px %

參考的點是元素的左上角（px）

寫%參考點是元素寬度和高度

配合Transform:rotateY()/rotateX()做旋轉軸的設置。

值可以只寫一個方向詞：left/right/center/top/bottom

<!--旋轉軸案例--> <style>div{margin:100px auto;width: 200px;height: 200px;border: 1px solid #000;}img{transition: all .6s;transform-origin:right;}div:hover img{transform: rotateY(180deg);}</style><div><img src="images/shn.jpg" alt=""></div>

四、開門案例

transform-style:preserve-3d; 讓元素及其內部元素（子元素）的轉換呈現3D效果，需要配合透視屬性（景深屬性）來做：

perspective: 700px; (一般我們會給700px~1500px);

css3屬性perspective（可以理解為 人眼到物體的距離）

五、構建立體面案例

<style>*{margin: 0;padding: 0;list-style: none;}.box,ul, li{width: 200px;height: 200px;}.box{border: 1px solid #000;margin: 100px auto;perspective: 700px;}.box ul{position: relative;transform-style: preserve-3d;transition:all 1s;}.box li{position: absolute;left: 0;top: 0;}.box li:nth-of-type(1){background-color: pink;transform:translateZ(100px);/*opacity: .7;*/}.box li:nth-of-type(2){background-color: skyblue;transform:rotateX(-90deg) translateZ(100px);}.box:hover ul{transform:rotateX(90deg);}</style><div class="box"><ul><li>前面</li><li>底面</li></ul></div>

六、動畫屬性

過渡屬性 animation 是實現css動效的屬性。

selector {animation: 動畫名稱 動畫持續時間 運動曲線 重復次數 往復運動; }@keyframes 動畫名稱 {0% { css狀態 }50% { css狀態 }100% { css狀態 } }

其中，0%和100%可以寫為 from 和 to 。

運動曲線：值多為 linear 。

重復次數：沒有單位，值為數值。如果是無數次，值為 infinite 。

動畫持續時間 運動曲線 重復次數 往復運動;
}

@keyframes 動畫名稱 {
0% { css狀態 }
50% { css狀態 }
100% { css狀態 }
}

其中，0%和100%可以寫為 `from` 和 `to` 。運動曲線：值多為 `linear` 。重復次數：沒有單位，值為數值。如果是無數次，值為 `infinite` 。往復運動：表示是否往復執行動畫，如是，則值為 `alternate`， 如否，則不寫。Demo 1、[各種效果](http://8.130.24.41/demo/homework18.html)

總結

以上是生活随笔為你收集整理的前端学习笔记10的全部內容，希望文章能夠幫你解決所遇到的問題。

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