|
設(shè)頁(yè)面中有<div class=" vortex "></div>,，若定義. vortex的樣式規(guī)則和關(guān)鍵幀如下： .vortex { position: relative; margin: 100px auto; border-radius: 50%; width:200px; height:200px; border: 4px solid transparent; animation: rotate 3s linear infinite; border-top-color: rgba(255, 0, 0, 0.8); border-bottom-color: rgba(0, 0,255, 0.8); } @keyframes rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } 可在頁(yè)面中呈現(xiàn)出如圖1所示的旋轉(zhuǎn)動(dòng)畫。 圖1 相對(duì)兩段弧的旋轉(zhuǎn) 若在頁(yè)面中放置9個(gè)如圖1所示的弧段,，并且這個(gè)9個(gè)弧段所在的圓同圓心,，9個(gè)圓的半徑依次相差10px，定義動(dòng)畫關(guān)鍵幀,，使這9個(gè)弧段旋轉(zhuǎn)起來(lái),，可得到渦旋的動(dòng)畫效果。 編寫的HTML文件如下,。 <!DOCTYPE html> <html> <title>渦旋</title> <head> <style> .container { position: relative; margin: 50px auto; width: 400px; height:400px; background:#d8d8d8; border: 4px solid rgba(255, 0, 0, 0.9); border-radius: 10%; } .vortex { position: relative; margin: 50px auto; width: 300px; height: 300px; display: block; overflow: hidden; } .vortex div { box-sizing: border-box; border-radius: 50%; padding: 10px; height: 100%; border: 4px solid transparent; animation: rotate linear 4s infinite; border-top-color: rgba(255, 0, 0, 0.8); border-bottom-color: rgba(0, 0,255, 0.8); } @keyframes rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } div:hover { animation-play-state: paused; } </style> </head> <body> <div class="container"> <div class='vortex'> <div><div><div><div><div><div><div><div><div> </div></div></div></div></div></div></div></div></div> </div> </div> </body> </html> 在瀏覽器中打開(kāi)包含這段HTML代碼的html文件,，可以呈現(xiàn)出如圖2所示的動(dòng)畫效果。
圖2 渦旋（1） 在動(dòng)畫運(yùn)行時(shí),，若將鼠標(biāo)移動(dòng)到某個(gè)弧段對(duì)應(yīng)的<div>上,，則該<div>之內(nèi)的弧段會(huì)旋轉(zhuǎn)，之外的弧段暫停旋轉(zhuǎn),，呈現(xiàn)出如圖3所示的動(dòng)畫效果,。 圖3 可暫停旋轉(zhuǎn)的渦旋 若將上面.vortex div樣式定義中的語(yǔ)句“border-bottom-color: rgba(0, 0,255, 0.8);”，修改為“border-left-color: rgba(255, 0,0,0.5);”,，其余部分保持不變,，則紅色弧段為一個(gè)半圓，此時(shí)呈現(xiàn)出如圖4所示的動(dòng)畫效果,。
圖4 渦旋（2） 若再將.vortex div樣式定義中的語(yǔ)句“animation: rotate linear 4s infinite;”修改為： animation: rotate 3s cubic-bezier(0.55, 0.38, 0.21, 0.88) infinite; 則動(dòng)畫的執(zhí)行過(guò)程不再是勻速的,，而是按在立方貝塞爾函數(shù)中定義速度函數(shù)進(jìn)行運(yùn)行，此時(shí)呈現(xiàn)出如圖5所示的動(dòng)畫效果,。 圖5 渦旋（3） 若只是刪除掉.vortex div樣式定義中的語(yǔ)句border-bottom-color: rgba(0, 0,255, 0.8);,，則藍(lán)色弧段被刪掉，只剩下紅色弧段,，此時(shí)呈現(xiàn)出如圖6所示的動(dòng)畫效果,。 圖6 渦旋（4） 若修改.vortex div樣式定義如下： .vortex div { box-sizing: border-box; border-radius: 50%; padding: 10px; height: 100%; border: 4px solid transparent; animation: rotate 3s linear infinite; border-top-color: rgba(255, 0, 0, 0.5); border-left-color: rgba(255,255,0,0.5); border-right-color: rgba(0,0,255,0.5); } 此時(shí)圓弧由黃色、紅色和藍(lán)色三段組成,，呈現(xiàn)出如圖7所示的動(dòng)畫效果,。 圖7 渦旋（5） |
|
|
