如果您想在網站中添加一些視覺上的吸引力,那么 CSS3 動效絕對是一個不錯的選擇。其中,CSS3 動效輪轉是一種非常有趣的動效,可以使網站的頁面更加多彩豐富。
下面,我們來嘗試創建一個簡單的 CSS3 動效輪轉效果,具體如下:
/*這是 CSS 樣式表中的代碼*/ .box { width: 200px; height: 200px; border: 2px solid #ddd; border-radius: 50%; animation: rotate 2s linear infinite; /*動畫效果*/ } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
在這段代碼中,我們首先使用了一個具有圓形邊框的盒子,即 class 為“box”。然后,我們使用了 CSS3 動畫效果,通過“animation”屬性實現輪轉動畫,輪轉時間為2秒,速度為線性(linear),并無限循環。
接下來,我們在樣式表中添加了一個“@keyframes”規則,用于定義這個動畫從何時開始到何時結束,并指定了初始狀態(0 度)和結束狀態(360 度)。因此,在實際運行過程中,這個盒子將不斷旋轉,直到停止為止。
在網站中應用 CSS3 動效輪轉效果,不但可以吸引更多用戶的注意,還可以為網站增加活力,提高用戶體驗。如今,越來越多的網站開始采用這種動效形式,希望您也能親自嘗試并運用到自己的網站中去。