CSS3 skew傾斜、rotate旋轉動畫.docVIP

CSS3 skew傾斜、rotate旋轉動畫css3出現之前，我們實現一個對象的一組連續(xù)動畫需要通過JavaScript或Jquery編寫，腳本代碼較為復雜；若需要實現傾斜、旋轉之類的動畫難度將更高（我還沒試過用JavaScript或Jquery如何實現），而且即使能實現估計花的時間代價及維護難度是很大的，很多時候只能依靠畫圖工具制作此類動畫文件；有時候在想如果不用腳本語言，也不用畫圖工作制作動畫文件，就能在網頁上實現傾斜、旋轉之類的動畫效果多好。最近擠出一些業(yè)余時間學習CSS3，其中就包含很多動畫示例，花了點時間學習和整理今天分享使用html+css3實現skew傾斜、rotate旋轉動畫，我們先看最終效果圖（我這里為了演示效果，就用QQ屏幕截成多張圖片，然后制作成gif動畫給大家簡單展示下，效果不好請大家多多包涵）圖1具體步驟如下：1、放置兩個div，一個作為容器（圖1中綠色背景部分id=warp），另一個作為動畫元素（圖1中黃色背景部分id=box）HTML代碼：WEBCSS代碼（設置容器及動畫元素默認樣式）：#warpwidth:320px;height:320px;background:#6FDE82;margin:20pxauto;#boxheight:40px;width:40px;background:yellow;position:relative;top:280px;left:0;注意：#boxposition: relative;是為該元素接下來做動畫做準備，因為動畫過程中需要改變其位置，故這里使用相對定位上述代碼為基本的html css，大家應該沒問題吧此時效果如下：2、使用CSS3 keyframes自定義動畫CSS代碼：keyframesmove0%top:280px;left:0;transform:skewX(0deg);width:40px;height:40px;20%top:0;left:0;transform:skewX(50deg);width: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(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:leftbottom;65%transform:rotate(-180deg);transform-origin:lefttop;代碼解析：1. css3自定義動畫需要使用keyframes規(guī)則，具體請看CSS3 keyframes 規(guī)則2. 設置動畫執(zhí)行進度本示例中定義了 0% 20% 22% 30% 40% 50% 55% 60% 65%幾個動畫進度，百分比到底代表什么意思？舉例說明：如果整個動畫執(zhí)行10秒，那么20%就代表當動畫執(zhí)行到2秒時的效果。所以整個自定義動畫翻譯過來就是在每個執(zhí)行進度中定義css樣式（比如 width，height，color等），這樣就形成了連貫的動畫效果。執(zhí)行進度百分比根據實際情況可自行調整。注意：該執(zhí)行進度并非一定要設置100%，如本示例中僅設置到65%，這就意味著剩下的35%就由css3自行完成動畫回歸到原始狀態(tài)（大家可以試試）3. 元素傾斜（元素變形）、旋轉（元素不變形）本示例中用到傾斜及旋轉動畫，傾斜使用skew()，參數為傾斜度數；旋轉使用rotate()，參數為旋轉度數；傾斜原理示意圖如下：X軸逆時針轉為正；Y軸順時針轉為正；舉例：skew(30deg),在本示例中效果將成這樣skew(-30deg),在本示例中效果將成這樣Y軸的這里就不舉例了，根據上述提示大家可自行測試效果4. transform-origin，元素傾斜或轉動中心點，具體屬性值可看CSS3 transform-origin 屬性這里的中心點，指的是動畫元素的中心點，元素圍繞該點轉動或傾斜，該點坐標是不會改變的；個人覺得這里需要頭腦中產生一些幾何圖形以便于理解，或者用一張紙（手機之類的物品）放在桌子上，用手固定該物品的某個點演示一下轉動效果，就明白了3、執(zhí)行自定義動畫CSS代碼：#boxheight:40px;width:40px;background:yellow;position:relative;top:280px;left:0;animation:move5sinfinite;代碼解析：animation:move5sinfinite;代表該自定義動畫完成耗時5秒，并且無限循環(huán)執(zhí)行animation屬性的詳細說明請看這里CSS3 animation（動畫） 屬性OK，上述步驟及原理大家都清楚了吧。本示例完整代碼如下，各位可以直接復制去執(zhí)行看看效果HTML5+CSS3skew傾斜、rotate旋轉動畫#warpwidth:320px;height:320px;background:#6FDE82;margin:20pxauto;#boxheight:40px;width:40px;background:yellow;position:relative;top:280px;left:0;animation:move5sinfinite;keyframesmove0%top:280px;left:0;transform:skewX(0deg);width:40px;height:40px;20%top:0;left:0;transform:skewX(50deg);width: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(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;6