CSS3 skew倾斜、rotate旋转动画
css3出現(xiàn)之前,我們實(shí)現(xiàn)一個(gè)對(duì)象的一組連續(xù)動(dòng)畫(huà)需要通過(guò)JavaScript或Jquery編寫(xiě),腳本代碼較為復(fù)雜;
若需要實(shí)現(xiàn)傾斜、旋轉(zhuǎn)之類(lèi)的動(dòng)畫(huà)難度將更高(我還沒(méi)試過(guò)用JavaScript或Jquery如何實(shí)現(xiàn)),而且即使能實(shí)現(xiàn)估計(jì)花的時(shí)間代價(jià)及維護(hù)難度是很大的,很多時(shí)候只能依靠畫(huà)圖工具制作此類(lèi)動(dòng)畫(huà)文件;
有時(shí)候在想如果不用腳本語(yǔ)言,也不用畫(huà)圖工作制作動(dòng)畫(huà)文件,就能在網(wǎng)頁(yè)上實(shí)現(xiàn)傾斜、旋轉(zhuǎn)之類(lèi)的動(dòng)畫(huà)效果多好。
?
最近擠出一些業(yè)余時(shí)間學(xué)習(xí)CSS3,其中就包含很多動(dòng)畫(huà)示例,花了點(diǎn)時(shí)間學(xué)習(xí)和整理
今天分享使用html+css3實(shí)現(xiàn)skew傾斜、rotate旋轉(zhuǎn)動(dòng)畫(huà),我們先看最終效果圖(我這里為了演示效果,就用QQ屏幕截成多張圖片,然后制作成gif動(dòng)畫(huà)給大家簡(jiǎn)單展示下,效果不好請(qǐng)大家多多包涵)
圖1
具體步驟如下:
1、放置兩個(gè)div,一個(gè)作為容器(圖1中綠色背景部分?id="warp"),另一個(gè)作為動(dòng)畫(huà)元素(圖1中黃色背景部分?id="box")
HTML代碼:
<div id="warp"><div id="box">WEB</div> </div>?
CSS代碼(設(shè)置容器及動(dòng)畫(huà)元素默認(rèn)樣式):
#warp {width: 320px;height: 320px;background: #6FDE82;margin: 20px auto; }#box {height: 40px;width: 40px;background: yellow;position: relative;top: 280px;left: 0;}注意:#box{position: relative;}是為該元素接下來(lái)做動(dòng)畫(huà)做準(zhǔn)備,因?yàn)閯?dòng)畫(huà)過(guò)程中需要改變其位置,故這里使用相對(duì)定位
上述代碼為基本的html css,大家應(yīng)該沒(méi)問(wèn)題吧
此時(shí)效果如下:
2、使用CSS3 @keyframes自定義動(dòng)畫(huà)
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;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: left bottom;}65% {transform: rotate(-180deg);transform-origin: left top;} }代碼解析:
css3自定義動(dòng)畫(huà)需要使用@keyframes規(guī)則,具體請(qǐng)看CSS3 @keyframes 規(guī)則
設(shè)置動(dòng)畫(huà)執(zhí)行進(jìn)度
本示例中定義了 0% 20% ?22% 30% 40% 50% 55% 60% 65%幾個(gè)動(dòng)畫(huà)進(jìn)度,
百分比到底代表什么意思?
舉例說(shuō)明:如果整個(gè)動(dòng)畫(huà)執(zhí)行10秒,那么20%就代表當(dāng)動(dòng)畫(huà)執(zhí)行到2秒時(shí)的效果。所以整個(gè)自定義動(dòng)畫(huà)翻譯過(guò)來(lái)就是在每個(gè)執(zhí)行進(jìn)度中定義css樣式(比如 width,height,color等),這樣就形成了連貫的動(dòng)畫(huà)效果。執(zhí)行進(jìn)度百分比根據(jù)實(shí)際情況可自行調(diào)整。
注意:該執(zhí)行進(jìn)度并非一定要設(shè)置100%,如本示例中僅設(shè)置到65%,這就意味著剩下的35%就由css3自行完成動(dòng)畫(huà)回歸到原始狀態(tài)(大家可以試試)
元素傾斜(元素變形)、旋轉(zhuǎn)(元素不變形)
本示例中用到傾斜及旋轉(zhuǎn)動(dòng)畫(huà),傾斜使用skew(),參數(shù)為傾斜度數(shù);旋轉(zhuǎn)使用rotate(),參數(shù)為旋轉(zhuǎn)度數(shù);
傾斜原理示意圖如下:
X軸逆時(shí)針轉(zhuǎn)為正;Y軸順時(shí)針轉(zhuǎn)為正;
舉例:
skew(30deg),在本示例中效果將成這樣
skew(-30deg),在本示例中效果將成這樣
Y軸的這里就不舉例了,根據(jù)上述提示大家可自行測(cè)試效果
transform-origin,元素傾斜或轉(zhuǎn)動(dòng)中心點(diǎn),具體屬性值可看CSS3 transform-origin 屬性
這里的中心點(diǎn),指的是動(dòng)畫(huà)元素的中心點(diǎn),元素圍繞該點(diǎn)轉(zhuǎn)動(dòng)或傾斜,該點(diǎn)坐標(biāo)是不會(huì)改變的;個(gè)人覺(jué)得這里需要頭腦中產(chǎn)生一些幾何圖形以便于理解,或者用一張紙(手機(jī)之類(lèi)的物品)放在桌子上,用手固定該物品的某個(gè)點(diǎn)演示一下轉(zhuǎn)動(dòng)效果,就明白了
3、執(zhí)行自定義動(dòng)畫(huà)
CSS代碼:
#box {height: 40px;width: 40px;background: yellow;position: relative;top: 280px;left: 0;animation: move 5s infinite; }?
代碼解析:
animation: move 5s infinite;?
代表該自定義動(dòng)畫(huà)完成耗時(shí)5秒,并且無(wú)限循環(huán)執(zhí)行
animation屬性的詳細(xì)說(shuō)明請(qǐng)看這里CSS3 animation(動(dòng)畫(huà)) 屬性
?
?
?
OK,上述步驟及原理大家都清楚了吧。本示例完整代碼如下,各位可以直接復(fù)制去執(zhí)行看看效果
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>HTML5+CSS3 skew傾斜、rotate旋轉(zhuǎn)動(dòng)畫(huà)</title><style type="text/css">#warp {width: 320px;height: 320px;background: #6FDE82;margin: 20px auto;}#box {height: 40px;width: 40px;background: yellow;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: 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: left bottom;}65% {transform: rotate(-180deg);transform-origin: left top;}}</style></head><body><div id="warp"><div id="box">WEB</div></div></body></html>?
好了,今天分享就到這里,以后還有更多喲,請(qǐng)大家一起來(lái)交流下,有興趣的朋友給我的文章評(píng)論下嘛
?
轉(zhuǎn)載于:https://www.cnblogs.com/tangyifeng/p/5248024.html
總結(jié)
以上是生活随笔為你收集整理的CSS3 skew倾斜、rotate旋转动画的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: HTML系列(七):多媒体
- 下一篇: 理解CSS3中的background-s