玫瑰,這個典雅浪漫的花朵,一直被人們所喜愛。如今,我們可以用 CSS3 動畫技術來展示玫瑰的美麗。
.rose { position: relative; width: 200px; height: 200px; margin: 0 auto; } .rose:before { content: ""; position: absolute; width: 0; height: 0; border-top: 20px solid red; border-left: 10px solid transparent; border-right: 10px solid transparent; top: 60px; left: 95px; transform: rotate(15deg); } .rose:after { content: ""; position: absolute; width: 0; height: 0; border-top: 20px solid red; border-left: 10px solid transparent; border-right: 10px solid transparent; top: 60px; left: 95px; transform: rotate(135deg); } .rose .heart { position: absolute; width: 60px; height: 60px; background: red; left: 70px; top: 70px; transform: rotate(-45deg); animation: heartbeat 1s linear infinite; } @keyframes heartbeat { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
如上述代碼所示,我們先創建一個容器.rose
,然后利用 CSS3 中的:before
和:after
偽元素來創建玫瑰的花瓣。接著,我們再創建一個.heart
類,利用transform
屬性旋轉后,再利用 CSS3 動畫技術實現一個心跳的效果。
當然,這只是一個簡單的示例,如果你愿意,利用 CSS3 動畫技術,你可以創造出更多的有趣效果!