CSS3提供了豐富的動畫效果,其中一種效果就是讓圖片上的曲線飄舞。下面是一段實現該效果的CSS3代碼:
.image { position: relative; width: 200px; height: 200px; overflow: hidden; } .image img { position: absolute; top: 0; left: 0; animation: curve 5s ease-in-out infinite; } @keyframes curve { 0% { transform: translate(0, 0); } 25%, 75% { transform: translate(50px, 100px); } 50% { transform: translate(100px, 0); } 100% { transform: translate(0, 0); } }
上面的代碼中,.image類的樣式定義了一個200x200的DIV容器,用于承載圖片。.image img類的樣式定義了圖片的位置,以及動畫效果的屬性。其中animation屬性用于指定動畫的名稱、時間、緩動函數和次數,這里的值是curve、5s、ease-in-out、infinite。@keyframes規則用于定義動畫的幀,這里的curve關鍵字與animation屬性中的名稱對應。
關于具體的曲線運動,我們可以通過transform屬性來實現。在curve動畫中,第一幀的位置是(0,0),60幀時向右移動50像素,下移100像素;120幀時回到初始位置;180幀時向右移動100像素,60幀時回到初始位置。這樣就形成了一個曲線運動的效果。
通過CSS3的動畫效果,我們可以輕易地實現各種酷炫的動態效果,讓網頁顯得更為生動有趣。如果你喜歡CSS3動畫,那么一定要嘗試一下讓圖片上的曲線飄舞效果,相信一定會給你帶來驚喜!
上一篇css3圖片變成純白色
下一篇css3圖片平移停留