前端學(xué)習(xí)筆記10

一、過渡屬性

過渡屬性 transition 是實(shí)現(xiàn)css動(dòng)效的屬性。

transition: 屬性名稱 動(dòng)畫持續(xù)時(shí)間 運(yùn)動(dòng)曲線 延遲時(shí)間;

我們可以來寫一下代碼：

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

如何單獨(dú)控制transition的某個(gè)屬性值：

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

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

transition: all 2s linear;

補(bǔ)充

多值寫法:

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

二、轉(zhuǎn)換屬性

轉(zhuǎn)換屬性 transform 可將元素進(jìn)行旋轉(zhuǎn)、位移和縮放等轉(zhuǎn)換。

旋轉(zhuǎn)Rotate

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

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

位移Translate

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

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

縮放Scale

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

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

translate實(shí)現(xiàn)未知寬高的盒子居中

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

三、旋轉(zhuǎn)中心點(diǎn)和旋轉(zhuǎn)軸

我們可以通過 transform-origin 這個(gè)屬性配合旋轉(zhuǎn)來控制元素的旋轉(zhuǎn)中心點(diǎn)和旋轉(zhuǎn)軸。

配合Transform:rotate()做旋轉(zhuǎn)中心點(diǎn)的設(shè)置，兩個(gè)值，單位可以是px %

參考的點(diǎn)是元素的左上角（px）

寫%參考點(diǎn)是元素寬度和高度

配合Transform:rotateY()/rotateX()做旋轉(zhuǎn)軸的設(shè)置。

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

<!--旋轉(zhuǎn)軸案例--> <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; 讓元素及其內(nèi)部元素（子元素）的轉(zhuǎn)換呈現(xiàn)3D效果，需要配合透視屬性（景深屬性）來做：

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

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

五、構(gòu)建立體面案例

<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>

六、動(dòng)畫屬性

過渡屬性 animation 是實(shí)現(xiàn)css動(dòng)效的屬性。

selector {animation: 動(dòng)畫名稱 動(dòng)畫持續(xù)時(shí)間 運(yùn)動(dòng)曲線 重復(fù)次數(shù) 往復(fù)運(yùn)動(dòng); }@keyframes 動(dòng)畫名稱 {0% { css狀態(tài) }50% { css狀態(tài) }100% { css狀態(tài) } }

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

運(yùn)動(dòng)曲線：值多為 linear 。

重復(fù)次數(shù)：沒有單位，值為數(shù)值。如果是無數(shù)次，值為 infinite 。

動(dòng)畫持續(xù)時(shí)間 運(yùn)動(dòng)曲線 重復(fù)次數(shù) 往復(fù)運(yùn)動(dòng);
}

@keyframes 動(dòng)畫名稱 {
0% { css狀態(tài) }
50% { css狀態(tài) }
100% { css狀態(tài) }
}

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。