CSS3旋轉循環是一種常見的動畫效果,可以讓頁面元素旋轉并不斷重復,為網頁增加生動的可視化效果。
代碼示例: .element { width: 50px; height: 50px; background-color: #e74c3c; animation: rotate 2s infinite linear; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
在上述代碼中,.element是一個頁面元素的類名,設置了它的寬度、高度和背景顏色。
接著,在該元素上設置了animation屬性,指定了動畫的名稱(rotate)、持續時間(2s)、重復次數(無限循環)和緩動函數(線性)。
最后,在@keyframes規則下定義了rotate動畫,設置元素旋轉從0度到360度,并以線性的方式實現動畫效果。
通過這段代碼,我們可以輕松實現一個循環旋轉的動畫效果,讓網頁更有趣味和活力。