CSS3是CSS的最新版本。它的優勢在于可以使用更多的屬性和方法來制作更加生動有趣的頁面效果。其中過渡(transition)是常用的一種屬性,可以讓元素在屬性變化時產生動態效果。我們可以與旋轉(transform)屬性進行配合,實現更加炫酷的動態效果。
.box{ width: 100px; height: 100px; background: #f00; transition: transform 2s; } .box:hover{ transform: rotate(180deg); transition-delay: 0.5s; }
以上是一個簡單的過渡和旋轉動畫的代碼示例。首先我們定義了一個元素.box,它有一個100x100像素的紅色背景。然后我們定義了它的過渡屬性transition,讓它的transform屬性在2秒內發生變化,從而實現過渡效果。
接下來,我們在.box上綁定了:hover事件,當它被鼠標浮動時,就會執行后續代碼。我們給它定義了一個transform:rotate(180deg),這時元素就會在自己的中心點旋轉180度。注意:這里傳入的角度參數可以根據需求隨意調整,來控制旋轉的角度和方向。而我們通過transition-delay屬性,讓它的過渡動畫延遲0.5秒執行,增加效果的層次感。
綜上所述,CSS3過渡和旋轉的配合可以為網頁設計帶來更加生動、活潑的效果,讓用戶有更好的視覺體驗。
上一篇css3動畫彈窗效果
下一篇CSS3動畫頭像情侶動漫