CSS3 可以實現更加豐富的動畫效果,比如實現一個心形跳動動畫就非常簡單。
.heart { width: 50px; height: 50px; position: relative; margin: 50px auto; transform: rotate(45deg); animation: beat 1s ease-in-out infinite; } .heart:before, .heart:after { content: ""; position: absolute; width: inherit; height: inherit; border-radius: 50% 50% 0 0; background: #fc2f70; } .heart:before { top: -25px; left: 0; } .heart:after { top: 0; left: 25px; } @keyframes beat { 0% { transform: scale(0.75); } 20% { transform: scale(0.75) rotate(45deg); } 40% { transform: scale(1) rotate(45deg); } 60% { transform: scale(0.75) rotate(45deg); } 80% { transform: scale(0.75); } 100% { transform: scale(0.75); } }
以上代碼創建了一個 class 為 "heart" 的樣式,通過偽元素:before和:after分別實現心形的左半邊和右半邊。在樣式中使用動畫定義,通過keyframes實現心形的跳動效果。
采用這種方式,我們就能夠快速地實現一個讓愛的心跳動的效果啦!
上一篇css3傾斜標簽
下一篇css3倒計時時鐘動畫