CSS3給我們帶來了許多強大的新特性,其中邊框轉動是一個非常有趣的特性,它可以使網頁元素的邊框朝著不同的方向旋轉。
.example { border: 10px solid red; border-radius: 50%; animation: rotate 3s infinite linear; } @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }
以上代碼演示了一個圓形的紅色邊框朝著順時針方向無限旋轉的效果。首先,我們使用了border屬性設置了一個寬度為10像素的紅色實線邊框,并通過border-radius屬性將邊框的四個角變為圓形。接著,我們使用了animation屬性觸發了一個動畫,即名為rotate的旋轉動畫,這個動畫會每3秒執行一次,并以線性的速度播放。具體來說,我們通過@keyframes規則定義了從0度到360度的旋轉過程,然后在from和to選擇器中使用transform屬性變換元素的形態,將其從初始狀態旋轉到終止狀態。
邊框轉動特性可以為網頁添加更多動態的效果,讓用戶在瀏覽過程中獲得更加流暢的體驗。