亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Tranform + Transitions + Animation

wapeyang / 2890人閱讀

摘要：屬性是定義元素距試圖的距離，設(shè)置以后，其子元素會(huì)獲得透視效果，需要注意的是該值只對(duì)轉(zhuǎn)換有效，這也是很容易理解的。此外，還可以通過的屬性值的方式設(shè)置，二者是有一定區(qū)別的，你可以認(rèn)為，前者是把整個(gè)看成一個(gè)舞臺(tái)，后者是每一個(gè)都是一個(gè)舞臺(tái)。

作者：心葉
時(shí)間：2018-04-27 11:45

Tranform 轉(zhuǎn)換 一些常用的屬性：

transform: none | transform-functions;【通過設(shè)置該屬性的值，我們可以對(duì)元素使用轉(zhuǎn)換，具體的屬性值在下面會(huì)專門介紹。】

transform-origin: x-axis y-axis z-axis;【設(shè)置元素轉(zhuǎn)換的中心點(diǎn)，最直觀的例子旋轉(zhuǎn)圖片，改變圖片選擇依賴的旋轉(zhuǎn)中心?！?/p>

transform-style: flat | preserve-3d;【定義里面轉(zhuǎn)換的元素是在2D平面呈現(xiàn)還是在3D空間呈現(xiàn)，講的直白些，就是這個(gè)元素里面的空間維度是二維還是三維?！?/p>

perspective: number | none;【屬性是定義3D元素距試圖的距離，設(shè)置以后，其子元素會(huì)獲得透視效果，需要注意的是該值只對(duì)3D轉(zhuǎn)換有效，這也是很容易理解的。此外，還可以通過Transform的屬性值的方式設(shè)置，二者是有一定區(qū)別的，你可以認(rèn)為，前者是把整個(gè)看成一個(gè)舞臺(tái)，后者是每一個(gè)都是一個(gè)舞臺(tái)。】

perspective-origin: x-axis y-axis;【必須和perspective一起使用，只對(duì)3D轉(zhuǎn)換元素有效，簡單的理解就是你的眼睛看的焦點(diǎn)?！?/p>

backface-visibility:hidden | visible;【這個(gè)很簡單，設(shè)置當(dāng)元素背對(duì)著屏幕時(shí)候，是否是可見的?！?/p>

上面介紹的屬性transform: none | transform-functions;其中有很多方法可以使用，具體的請查看文件API，這里沒有列舉出來的意義，其中perspective(n)方法是為3D轉(zhuǎn)換元素定義透視視圖，需要稍微留意一下，其中一些方法比較特殊，以后會(huì)多帶帶去介紹。

Transitions 過渡 
transition: property duration timing-function delay;

請始終設(shè)置 transition-duration 屬性，否則時(shí)長為 0，就不會(huì)產(chǎn)生過渡效果。上面是統(tǒng)一設(shè)置，也可以分別設(shè)置各個(gè)屬性。

一些常用的屬性：

1.transition-property：規(guī)定設(shè)置過渡效果的 CSS 屬性的名稱；

2.transition-duration：規(guī)定完成過渡效果需要多少秒或毫秒；

3.transition-timing-function：規(guī)定速度效果的速度曲線；

4.transition-delay：定義過渡效果何時(shí)開始。

Animation 動(dòng)畫 
animation: name duration timing-function delay iteration-count direction;

請始終規(guī)定 animation-duration 屬性，否則時(shí)長為 0，就不會(huì)播放動(dòng)畫了。上面是統(tǒng)一設(shè)置，也可以分別設(shè)置各個(gè)屬性。

一些常用的屬性：

1.animation-name：規(guī)定需要綁定到選擇器的 keyframe 名稱；

2.animation-duration：規(guī)定完成動(dòng)畫所花費(fèi)的時(shí)間，以秒或毫秒計(jì)；

3.animation-timing-function： 規(guī)定動(dòng)畫的速度曲線；

4.animation-delay：規(guī)定在動(dòng)畫開始之前的延遲；

5.animation-iteration-count：規(guī)定動(dòng)畫應(yīng)該播放的次數(shù)；

6.animation-direction：規(guī)定是否應(yīng)該輪流反向播放動(dòng)畫；

7.animation-fill-mode (可以設(shè)置為none | forwards | backwards | both)：規(guī)定動(dòng)畫在播放之前或之后，其動(dòng)畫效果是否可見；

8.animation-play-state（可以設(shè)置為paused|running）：規(guī)定動(dòng)畫正在運(yùn)行還是暫停，可以在 JavaScript 中使用該屬性，這樣就能在播放過程中暫停動(dòng)畫；

9.@keyframes animName{from {} to {}}：定義動(dòng)畫名稱為animName的動(dòng)畫關(guān)鍵幀。

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/113170.html

相關(guān)文章

  • CSS3-transition

    摘要：規(guī)定應(yīng)用過渡的屬性的名稱。規(guī)定過渡效果的時(shí)間曲線?？赡艿闹凳侵林g的數(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)畫的過度。通常...

    acrazing 評(píng)論0 收藏0

  • 【小程序可用】CSS3 animation 實(shí)現(xiàn)的跑馬燈

    摘要：先放個(gè)效果如果能訪問最好主要原理微信小程序現(xiàn)在實(shí)際上還是用的，里面搞動(dòng)畫效率最高的莫過于使用的了。由于微信小程序中無法獲取到對(duì)應(yīng)元素的寬度，這個(gè)時(shí)間只能寫死或者根據(jù)的長度估算出一個(gè)值。 最近有個(gè)項(xiàng)目里面用到跑馬燈，網(wǎng)上搜了下，雖然有人貼出來過一些實(shí)現(xiàn)，但是實(shí)際上都存在一些個(gè)問題。 哎，再造個(gè)輪子吧。 先放個(gè)效果：showImg(https://segmentfault.com/img/...

    tianlai 評(píng)論0 收藏0

  • 說說動(dòng)畫卡頓的解決方案

    摘要：動(dòng)畫卡頓解決方案前端時(shí)間用實(shí)現(xiàn)頁面中首頁動(dòng)畫過渡，很簡單的一個(gè)效果，首頁加載一個(gè)客服頭像，先放大，停留后再縮小至頂部。參考文章深入瀏覽器理解和的性能問題解決動(dòng)畫卡頓的辦法 CSS3 動(dòng)畫卡頓解決方案 前端時(shí)間用animation實(shí)現(xiàn)H5頁面中首頁動(dòng)畫過渡，很簡單的一個(gè)效果，首頁加載一個(gè)客服頭像，先放大，停留700ms后再縮小至頂部。代碼如下 ...

    AlphaWatch 評(píng)論0 收藏0

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

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<