CSS3是一種常用于網頁布局和樣式設計的編程語言。它包含了許多現代化的特性,其中一個非常受歡迎的特性就是愛心動畫。
.heart { width: 50px; height: 50px; transform: rotate(45deg); position: relative; margin: auto; } .heart:before, .heart:after { content: ""; background-color: red; border-radius: 50%; position: absolute; } .heart:before { width: 50px; height: 50px; top: -25px; left: 0; } .heart:after { width: 50px; height: 50px; top: 0; left: 25px; }
這是一個簡單的css3愛心動畫。使用transform: rotate(45deg);屬性可以將一個正方形旋轉45度成為菱形,transform: rotate(-45deg);可以將它旋轉回正方形。然后使用:before和:after偽元素來創建兩個半個圓形,最終形成一個愛心圖案。
我們可以在動畫中加入transition屬性來使其變得更加平滑,例如:
.heart:hover:before { transform: scale(1.2); } .heart:hover:after { transform: scale(1.2); }
這樣當鼠標懸停在愛心上時,愛心會緩慢變大,移開后會慢慢變回原始大小。
CSS3愛心動畫是網頁設計中非常受歡迎的一個設計元素,具有很強的表現力和藝術性。在制作個性化和有創意的網頁時,可以考慮使用這種動畫來增加頁面的吸引力和趣味性。
上一篇css3 灰度