最近,點贊爆炸效果被越來越多的網站所采用,不僅為網站增添趣味性,還能夠吸引用戶的眼球。那么,如何實現這個效果呢?我們可以使用CSS3動畫來完成,下面來看一下具體實現方法:
.like-heart { color: #e74c3c; font-size: 30px; line-height: 30px; text-align: center; transform: scale(1); animation: beat .7s ease-out; } .like-heart.clicked { animation: explode .4s ease-out; transform: scale(10); opacity: 0; } @keyframes beat { 0% { transform: scale(1); } 50% { transform: scale(1.3); } 100% { transform: scale(1); } } @keyframes explode { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(10); opacity: 0; } }
首先,我們定義了一個名為like-heart的class,這里我們使用了紅色的顏色和30px的字體大小,為了讓點贊心形居中,我們還設置了文本對齊方式為center。初始狀態下,點贊心形大小為正常大小,沒有被點擊過,因此我們設置了transform: scale(1)和animation: beat .7s ease-out屬性。
接下來,我們又定義了一個名為clicked的class,用來表示當點贊心形被點擊時發生的變化。這里我們設置了animation: explode .4s ease-out和transform: scale(10)兩個屬性,分別是點贊心形爆炸的動畫和爆炸后的變形。同時,更改了opacity屬性,將點贊心形漸變消失。
最后,我們使用了@keyframes來定義了兩個動畫的具體過程。其中,beat動畫是一種心跳的效果,先讓點贊心形變大一些,再還原到原本的大小;explode動畫是一種爆炸的效果,逐漸變大并且透明度逐漸變小,最終消失。
通過這樣的CSS3動畫效果,我們可以實現一個簡單的點贊爆炸效果,讓網站更加生動有趣。更多的CSS3動畫效果,可以參考相關的資料學習。
上一篇點贊css效果