在各種短視頻界面上，我們經常會看到類似這樣的點贊動畫： 非常的有意思，有意思的交互會讓用戶更願意進行互動。 那麼，這麼有趣的點贊動畫，有沒有可能使用純 CSS 實現呢？那當然是必須的，本文，就將巧妙的藉助 transition，僅僅使用 CSS 完成這麼一個點贊動畫。 實現不同表情的不斷上升 如果使 ...
在各種短視頻界面上，我們經常會看到類似這樣的點贊動畫：
非常的有意思，有意思的交互會讓用戶更願意進行互動。
那麼，這麼有趣的點贊動畫，有沒有可能使用純 CSS 實現呢？那當然是必須的，本文，就將巧妙的藉助 transition，僅僅使用 CSS 完成這麼一個點贊動畫。
實現不同表情的不斷上升
如果使用純 CSS 實現這一整套動畫的話。我們首先需要實現一段無限迴圈的，大量不同的表情不斷向上漂浮的動畫。
像是這樣：
這個整體還是比較容易實現的，核心原理就是同一個動畫，設置不同的 transition-duration，transition-dalay，和一定範圍內的旋轉角度。
我們首先要實現多個表情，一個 DOM 標簽放入一個隨機的表情。
我們可以手動一個一個的添加：
<ul class="g-wrap">
<li>
