CSS3 skew傾斜rotate旋轉(zhuǎn)動畫_第1頁
CSS3 skew傾斜rotate旋轉(zhuǎn)動畫_第2頁
CSS3 skew傾斜rotate旋轉(zhuǎn)動畫_第3頁
CSS3 skew傾斜rotate旋轉(zhuǎn)動畫_第4頁
CSS3 skew傾斜rotate旋轉(zhuǎn)動畫_第5頁
已閱讀5頁，還剩5頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認領(lǐng)

文檔簡介

1、CSS3 skew傾斜、rotate旋轉(zhuǎn)動畫css3出現(xiàn)之前，我們實現(xiàn)一個對象的一組連續(xù)動畫需要通過JavaScript或Jquery編寫，腳本代碼較為復雜；若需要實現(xiàn)傾斜、旋轉(zhuǎn)之類的動畫難度將更高（我還沒試過用JavaScript或Jquery如何實現(xiàn)），而且即使能實現(xiàn)估計花的時間代價及維護難度是很大的，很多時候只能依靠畫圖工具制作此類動畫文件；有時候在想如果不用腳本語言，也不用畫圖工作制作動畫文件，就能在網(wǎng)頁上實現(xiàn)傾斜、旋轉(zhuǎn)之類的動畫效果多好。最近擠出一些業(yè)余時間學習CSS3，其中就包含很多動畫示例，花了點時間學習和整理今天分享使用html+css3實現(xiàn)skew傾斜、rotate旋轉(zhuǎn)動畫，

2、我們先看最終效果圖（我這里為了演示效果，就用QQ屏幕截成多張圖片，然后制作成gif動畫給大家簡單展示下，效果不好請大家多多包涵）圖1具體步驟如下：1、放置兩個div，一個作為容器（圖1中綠色背景部分 id="warp"），另一個作為動畫元素（圖1中黃色背景部分 id="box"）HTML代碼：<div id="warp">    <div id="box">WEB</div></div>C

3、SS代碼（設(shè)置容器及動畫元素默認樣式）：#warp width: 320px;height: 320px;background: #6FDE82;margin: 20px auto;#box height: 40px;width: 40px;background: yellow;position: relative;top: 280px;left: 0;注意：#boxposition: relative;是為該元素接下來做動畫做準備，因為動畫過程中需要改變其位置，故

4、這里使用相對定位上述代碼為基本的html css，大家應(yīng)該沒問題吧此時效果如下：2、使用CSS3 keyframes自定義動畫CSS代碼：keyframes move 0% top: 280px;left: 0;transform: skewX(0deg);width: 40px;height: 40px;20% top: 0;left: 0;transform: skewX(50deg);width: 60px;height: 20px;backgrou

5、nd: red;22% top: 0;left: 0;transform: skewX(0deg);width: 40px;height: 40px;30% top: 0;left: 0;transform: skewX(0deg);width: 320px;height: 40px;40% top: 0;left: 280px;transform: skewX(0deg);width: 40px;height:&#

6、160;40px;background: green;50% top: 0;left: 280px;transform: skewX(0deg);width: 20px;height: 320px;55% top: 280px;left: 280px;transform: skewX(0deg);width: 40px;height: 40px;background: blue;60% transform: rotate(-90deg)

7、;transform-origin: left bottom;65% transform: rotate(-180deg);transform-origin: left top;代碼解析：1. css3自定義動畫需要使用keyframes規(guī)則，具體請看CSS3 keyframes 規(guī)則2. 設(shè)置動畫執(zhí)行進度本示例中定義了 0% 20%  22% 30% 40% 50% 55% 60% 65%幾個動畫進度，百分比到底代表什么意思？舉例說明：如果整個動畫執(zhí)行10秒，那么20%就代表當動畫執(zhí)行到2秒時的效果。所以整個自定義動畫翻譯

8、過來就是在每個執(zhí)行進度中定義css樣式（比如 width，height，color等），這樣就形成了連貫的動畫效果。執(zhí)行進度百分比根據(jù)實際情況可自行調(diào)整。注意：該執(zhí)行進度并非一定要設(shè)置100%，如本示例中僅設(shè)置到65%，這就意味著剩下的35%就由css3自行完成動畫回歸到原始狀態(tài)（大家可以試試）3. 元素傾斜（元素變形）、旋轉(zhuǎn)（元素不變形）本示例中用到傾斜及旋轉(zhuǎn)動畫，傾斜使用skew()，參數(shù)為傾斜度數(shù)；旋轉(zhuǎn)使用rotate()，參數(shù)為旋轉(zhuǎn)度數(shù)；傾斜原理示意圖如下：X軸逆時針轉(zhuǎn)為正；Y軸順時針轉(zhuǎn)為正；舉例：skew(30deg),在本示例中效果將成這樣skew(-30deg),在本示例中效果將

9、成這樣Y軸的這里就不舉例了，根據(jù)上述提示大家可自行測試效果4. transform-origin，元素傾斜或轉(zhuǎn)動中心點，具體屬性值可看CSS3 transform-origin 屬性這里的中心點，指的是動畫元素的中心點，元素圍繞該點轉(zhuǎn)動或傾斜，該點坐標是不會改變的；個人覺得這里需要頭腦中產(chǎn)生一些幾何圖形以便于理解，或者用一張紙（手機之類的物品）放在桌子上，用手固定該物品的某個點演示一下轉(zhuǎn)動效果，就明白了3、執(zhí)行自定義動畫CSS代碼：#box height: 40px;width: 40px;background: yellow;position:

10、0;relative;top: 280px;left: 0;animation: move 5s infinite;代碼解析：animation: move 5s infinite;代表該自定義動畫完成耗時5秒，并且無限循環(huán)執(zhí)行animation屬性的詳細說明請看這里CSS3 animation（動畫） 屬性O(shè)K，上述步驟及原理大家都清楚了吧。本示例完整代碼如下，各位可以直接復制去執(zhí)行看看效果<!DOCTYPE html><html><head><meta

11、0;charset="UTF-8"><title>HTML5+CSS3 skew傾斜、rotate旋轉(zhuǎn)動畫</title><style type="text/css">#warp width: 320px;height: 320px;background: #6FDE82;margin: 20px auto;#box height: 40px;width: 40px;background: ye

12、llow;position: relative;top: 280px;left: 0;animation: move 5s infinite;keyframes move 0% top: 280px;left: 0;transform: skewX(0deg);width: 40px;height: 40px;20% top: 0;left: 0;transform: skewX(50deg);width: 

13、;60px;height: 20px;background: red;22% top: 0;left: 0;transform: skewX(0deg);width: 40px;height: 40px;30% top: 0;left: 0;transform: skewX(0deg);width: 320px;height: 40px;40% top: 0;left: 280px;transform: skewX(

14、0deg);width: 40px;height: 40px;background: green;50% top: 0;left: 280px;transform: skewX(0deg);width: 20px;height: 320px;55% top: 280px;left: 280px;transform: skewX(0deg);width: 40px;height: 40px;background: blue;60% transform: rotate(-90deg);transform-origin: left bottom;65% transform: rotate(-180deg);transform-origin:&

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
  • 6. 下載文件中如有侵權(quán)或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論