CSS3心形跳動動畫可以為網頁增添更多的活力和趣味性,下面介紹一下如何制作這個動畫效果。
.heart { width: 50px; height: 50px; position: relative; animation: heartbeat 1s ease-in-out infinite; } .heart:before, .heart:after { content: ""; position: absolute; left: 25px; top: 0; width: 25px; height: 40px; background: #d62929; border-radius: 25px 25px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } .heart:after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } @keyframes heartbeat { 0% { transform: scale(0.75); } 20% { transform: scale(1); } 40% { transform: scale(0.75); } 60% { transform: scale(1); } 80% { transform: scale(0.75); } 100% { transform: scale(0.75); } }
以上代碼可以實現一個簡單的心形動畫,通過對每個部件的定位和變形,實現了心形圖案的繪制。同時,通過設置動畫的關鍵幀和時間函數,實現了心臟的跳動效果。
CSS3心形跳動動畫可以應用在很多場合,比如表達愛情、浪漫等主題的廣告、網站背景等,能夠起到很好的視覺效果和情感印象。需要注意的是,雖然CSS3動畫相對來說比較簡單易學,但是在實際應用中還需要考慮兼容性、性能等問題,才能將動畫效果最大化地發揮出來。
上一篇css3彈窗消失特效
下一篇css3徑向漸變圓環