H5 直播的疯狂点赞动画是如何实现的？

效果图如下：

Step 6: 补齐动画样式

这里预设了一种运行曲线轨迹，左右摆动的样式，我们在再预设更多种曲线，达到随机轨迹的目的。

比如 bubble_1 的左右偏移动画轨迹，我们可以修改偏移值，来达到不同的曲线轨迹。

Step 7: JS 操作随机增加节点样式

提供增加点赞的方法，随机将点赞的样式组合，然后渲染到节点上。

let praiseBubble = document.getElementById(“praise_bubble”);

let last = 0;

function addPraise() {

const b =Math.floor(Math.random() * 6) + 1;

const bl =Math.floor(Math.random() * 11) + 1; // bl1~bl11

let d = document.createElement(“div”);

d.className = bubble b${b} bl${bl};

d.dataset.t = String(Date.now());

praiseBubble.appendChild(d);

}

setInterval(() => {

addPraise();

},300)

在使用 CSS 来实现点赞的时候，通常还需要注意设置 bubble 的随机延时，比如：

.bl2{

animation:bubble_2  b u b b l e t i m e   l i n e a r   . 4 s   1   f o r w a r d s , b u b b l e b i g 2   bubble_time linear .4s 1 forwards,bubble_big_2  bubble