方法:1、利用“元素{animation:名稱 時間 infinite}”語句給元素綁定動畫;2、利用“@keyframes 名稱{100%{transform:rotate(旋轉角度)}}”語句設置動畫的旋轉動作,實現(xiàn)元素一直旋轉效果。
本教程操作環(huán)境:windows10系統(tǒng)、css3&&html5版、dell g3電腦。
css怎樣實現(xiàn)一直旋轉動畫效果
在css中,可以利用animation屬性來個元素綁定動畫,animation屬性可以控制動畫時長和次數(shù),語法為:
animation: name duration timing-function delay iteration-count direction;
其中:
其中屬性的值設置為“infinite”時,規(guī)定動畫無限次播放,當我們給元素綁定旋轉動畫時就能夠一直旋轉了。
再通過@keyframes規(guī)則設置動畫的旋轉動作。
示例如下:
<!doctype html><html lang=\”en\”><head> <meta charset=\”utf-8\”> <meta name=\”viewport\” content=\”width=device-width, initial-scale=1.0\”> <meta http-equiv=\”x-ua-compatible\” content=\”ie=edge\”> <title>document</title> <style> div{ width:100px; height:100px; background-color:pink; animation:fadenum 5s infinite; } @keyframes fadenum{ 100%{transform:rotate(360deg);}} </style></head><body> <div></div></body></html>
輸出結果:
(學習視頻分享:css視頻教程)