CSS圖形旋轉動畫是一種常見的動態效果,可以使網頁元素在呈現時產生流暢的動態效果,吸引用戶的注意力。
// 使用transform屬性和@keyframes規則實現旋轉動畫 .spinner { width: 50px; height: 50px; border: 3px solid #ddd; border-top-color: #333; border-radius: 50%; animation: spin 1s ease-in-out infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
以上代碼使用了transform屬性和@keyframes規則,其中transform屬性可以實現元素的旋轉、縮放、位移等動態效果,@keyframes規則用于定義動畫過程中的關鍵幀,即動畫從開始到結束的各個狀態。
spinner類是應用動畫效果的元素,通過給元素添加animation屬性,指定了使用spin規則實現旋轉動畫,最后通過infinite關鍵字指定動畫無限循環。
動畫效果的實現依賴于瀏覽器的css3兼容性,不同瀏覽器可能會有不同的效果,因此在實際使用中需要充分考慮瀏覽器兼容性,并適配不同瀏覽器的效果。