資訊專欄INFORMATION COLUMN
摘要：屬性是定義元素距試圖的距離，設(shè)置以后，其子元素會(huì)獲得透視效果，需要注意的是該值只對(duì)轉(zhuǎn)換有效，這也是很容易理解的。此外，還可以通過(guò)的屬性值的方式設(shè)置，二者是有一定區(qū)別的，你可以認(rèn)為，前者是把整個(gè)看成一個(gè)舞臺(tái)，后者是每一個(gè)都是一個(gè)舞臺(tái)。
作者：心葉
時(shí)間：2018-04-27 11:45
transform: none | transform-functions;【通過(guò)設(shè)置該屬性的值，我們可以對(duì)元素使用轉(zhuǎn)換，具體的屬性值在下面會(huì)專門介紹。】
transform-origin: x-axis y-axis z-axis;【設(shè)置元素轉(zhuǎn)換的中心點(diǎn)，最直觀的例子旋轉(zhuǎn)圖片，改變圖片選擇依賴的旋轉(zhuǎn)中心。】
transform-style: flat | preserve-3d;【定義里面轉(zhuǎn)換的元素是在2D平面呈現(xiàn)還是在3D空間呈現(xiàn)，講的直白些，就是這個(gè)元素里面的空間維度是二維還是三維。】
perspective: number | none;【屬性是定義3D元素距試圖的距離，設(shè)置以后，其子元素會(huì)獲得透視效果，需要注意的是該值只對(duì)3D轉(zhuǎn)換有效，這也是很容易理解的。此外，還可以通過(guò)Transform的屬性值的方式設(shè)置，二者是有一定區(qū)別的，你可以認(rèn)為，前者是把整個(gè)看成一個(gè)舞臺(tái)，后者是每一個(gè)都是一個(gè)舞臺(tái)。】
perspective-origin: x-axis y-axis;【必須和perspective一起使用，只對(duì)3D轉(zhuǎn)換元素有效，簡(jiǎn)單的理解就是你的眼睛看的焦點(diǎn)。】
backface-visibility:hidden | visible;【這個(gè)很簡(jiǎn)單，設(shè)置當(dāng)元素背對(duì)著屏幕時(shí)候，是否是可見(jiàn)的。】
上面介紹的屬性transform: none | transform-functions;其中有很多方法可以使用，具體的請(qǐng)查看文件API，這里沒(méi)有列舉出來(lái)的意義，其中perspective(n)方法是為3D轉(zhuǎn)換元素定義透視視圖，需要稍微留意一下，其中一些方法比較特殊，以后會(huì)多帶帶去介紹。
Transitions 過(guò)渡transition: property duration timing-function delay;
請(qǐng)始終設(shè)置 transition-duration 屬性，否則時(shí)長(zhǎng)為 0，就不會(huì)產(chǎn)生過(guò)渡效果。上面是統(tǒng)一設(shè)置，也可以分別設(shè)置各個(gè)屬性。
一些常用的屬性：1.transition-property：規(guī)定設(shè)置過(guò)渡效果的 CSS 屬性的名稱；
2.transition-duration：規(guī)定完成過(guò)渡效果需要多少秒或毫秒；
3.transition-timing-function：規(guī)定速度效果的速度曲線；
4.transition-delay：定義過(guò)渡效果何時(shí)開(kāi)始。
Animation 動(dòng)畫(huà)animation: name duration timing-function delay iteration-count direction;
請(qǐng)始終規(guī)定 animation-duration 屬性，否則時(shí)長(zhǎng)為 0，就不會(huì)播放動(dòng)畫(huà)了。上面是統(tǒng)一設(shè)置，也可以分別設(shè)置各個(gè)屬性。
一些常用的屬性：1.animation-name：規(guī)定需要綁定到選擇器的 keyframe 名稱；
2.animation-duration：規(guī)定完成動(dòng)畫(huà)所花費(fèi)的時(shí)間，以秒或毫秒計(jì)；
3.animation-timing-function： 規(guī)定動(dòng)畫(huà)的速度曲線；
4.animation-delay：規(guī)定在動(dòng)畫(huà)開(kāi)始之前的延遲；
5.animation-iteration-count：規(guī)定動(dòng)畫(huà)應(yīng)該播放的次數(shù)；
6.animation-direction：規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫(huà)；
7.animation-fill-mode (可以設(shè)置為none | forwards | backwards | both)：規(guī)定動(dòng)畫(huà)在播放之前或之后，其動(dòng)畫(huà)效果是否可見(jiàn)；
8.animation-play-state（可以設(shè)置為paused|running）：規(guī)定動(dòng)畫(huà)正在運(yùn)行還是暫停，可以在 JavaScript 中使用該屬性，這樣就能在播放過(guò)程中暫停動(dòng)畫(huà)；
9.@keyframes animName{from {} to {}}：定義動(dòng)畫(huà)名稱為animName的動(dòng)畫(huà)關(guān)鍵幀。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/113170.html
摘要：規(guī)定應(yīng)用過(guò)渡的屬性的名稱。規(guī)定過(guò)渡效果的時(shí)間曲線。可能的值是至之間的數(shù)值。負(fù)值是允許的，這樣是元素逆時(shí)針旋轉(zhuǎn)。 CSS3之transition實(shí)現(xiàn)下劃線 在這里先看看我們的demo showImg(https://segmentfault.com/img/remote/1460000014676200); 認(rèn)識(shí)transition 這是CSS3中新增的一個(gè)樣式，可以實(shí)現(xiàn)動(dòng)畫(huà)的過(guò)度。通常...
摘要：先放個(gè)效果如果能訪問(wèn)最好主要原理微信小程序現(xiàn)在實(shí)際上還是用的，里面搞動(dòng)畫(huà)效率最高的莫過(guò)于使用的了。由于微信小程序中無(wú)法獲取到對(duì)應(yīng)元素的寬度，這個(gè)時(shí)間只能寫(xiě)死或者根據(jù)的長(zhǎng)度估算出一個(gè)值。 最近有個(gè)項(xiàng)目里面用到跑馬燈，網(wǎng)上搜了下，雖然有人貼出來(lái)過(guò)一些實(shí)現(xiàn)，但是實(shí)際上都存在一些個(gè)問(wèn)題。 哎，再造個(gè)輪子吧。 先放個(gè)效果：showImg(https://segmentfault.com/img/...
摘要：動(dòng)畫(huà)卡頓解決方案前端時(shí)間用實(shí)現(xiàn)頁(yè)面中首頁(yè)動(dòng)畫(huà)過(guò)渡，很簡(jiǎn)單的一個(gè)效果，首頁(yè)加載一個(gè)客服頭像，先放大，停留后再縮小至頂部。參考文章深入瀏覽器理解和的性能問(wèn)題解決動(dòng)畫(huà)卡頓的辦法 CSS3 動(dòng)畫(huà)卡頓解決方案 前端時(shí)間用animation實(shí)現(xiàn)H5頁(yè)面中首頁(yè)動(dòng)畫(huà)過(guò)渡，很簡(jiǎn)單的一個(gè)效果，首頁(yè)加載一個(gè)客服頭像，先放大，停留700ms后再縮小至頂部。代碼如下 ...
閱讀 2840·2023-04-25 20:06
閱讀 1454·2021-08-26 14:15
閱讀 2246·2021-08-12 13:27
閱讀 1782·2019-08-30 15:55
閱讀 3480·2019-08-30 13:20
閱讀 2838·2019-08-29 15:12
閱讀 3341·2019-08-29 15:06
閱讀 2871·2019-08-29 14:13
