CSS3旋轉360度停止是一種常見的動畫效果,通過CSS3的transform屬性可以輕松實現。代碼如下:
.box { width: 100px; height: 100px; background-color: red; transform: rotate(0deg); transition: transform 1s ease-in-out; } .box:hover { transform: rotate(360deg); }
上面的代碼實現了一個正方形方塊,在鼠標懸停時以中心點為軸心逆時針旋轉360度,停止在原位。其中,通過transform: rotate(0deg)設置開始時的旋轉角度為0度,transition屬性設置變換動畫的過渡時間、變速曲線和變換效果;當鼠標懸停在方塊上時,將transform的值設為rotate(360deg)表示繞中心點逆時針旋轉360度。
CSS3旋轉360度停止常用于項目中的hover效果展現,在網頁設計中起到了很好的提升用戶體驗、增強互動性的作用,值得在實際項目中應用。