小编给大家分享一下如何实现HTML5移动端弹幕动画效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

思路

1.把单个内容编辑好，计算自身宽度，确定初始位置

2.移动的距离是屏幕宽度

3.js动态的添加css动画函数，将高度、动画移动时间、动画延迟时间都用随机数控制

代码：

html骨架结构

(以三个为例，如果觉得界面太长不友好，也可以js动态的生成)

<divclass="cute-barrage"><divclass="barrage-div"><imgsrc="https://cache.yisu.com/upload/information/20220118/474/142310.jpg"/><span>一月一度的花呗还款期到啦<i>哈哈哈</i></span></div><divclass="barrage-div"><imgsrc="https://cache.yisu.com/upload/information/20220118/474/142311.jpg"/><span>坐等发工资<i>呵呵呵</i></span></div><divclass="barrage-div"><imgsrc="../../static/cutePresent/resource/avatar.png"/><span>变有钱变有钱<i>耶耶耶</i></span></div></div>

css样式

.cute-barrage是确定展示范围和位置，宽度为100%，高度自定，横向超出部分隐藏
.barrage-div 内容部分，长度由内容决定，确定相对父级的位置;

html,body{width:100%;}.cute-barrage{width:100%;height:4rem;/*确定弹幕长度*/position:absolute;top:1.5rem;/*确定弹幕高度*/left:0;overflow-x:hidden;/*横向超出部分隐藏*/.barrage-div{position:absolute;top:0;right:-100%;/*保证一开始在界面外侧，从右向左就是right，从左向右就是left*/height:0.6rem;background-color:rgba(255,255,255,0.9);border-radius:2rem;white-space:nowrap;/*确保内容在一行显示，不然移动到最后会折行*/img{width:0.5rem;height:0.5rem;vertical-align:middle;//内联块元素，居中对齐padding-left:0.05rem;border-radius:50%;}span{font-size:14px;padding:00.1rem;line-height:0.6rem;//内联块元素，居中对齐四个缺一不可height:0.6rem;//内联块元素，居中对齐四个缺一不可display:inline-block;//内联块元素，居中对齐四个缺一不可vertical-align:middle;//内联块元素，居中对齐四个缺一不可i{color:#fe5453;font-weight:700;}}}}

js动态动画实现(zepto.js)

//弹幕varwinWidth=$(window).width();//获取屏幕宽度$(".barrage-div").each(function(index,value){//遍历每条弹幕varwidth=$(value).width();//获取当前弹幕的宽度vartopRandom=Math.floor(Math.random()*3)+'rem';//获取0,1,2的随机数可根据情况改变$(value).css({"right":-width,"top":topRandom});//将弹幕移动到屏幕外面，正好超出的位置//拼写动画帧函数，记得每个ani要进行区分，宽度从自己的负宽度移动一整个屏幕的距离varkeyframes=`@keyframesani${index}{form{right:${-width}px;}to{right:${winWidth}px;}}@-webkit-keyframesani${index}{form{right:${-width}px;}to{right:${winWidth}px;}}`;//添加到页面的head标签里面$("<style>").attr("type","text/css").html(keyframes).appendTo($("head"));//定义动画速度列表varaniList=[3,5,7,9,11];//取数组的随机数，0,1,2,3,4varaniTime=Math.floor(Math.random()*5);//给当全前弹幕添加animation的css//延迟的时间用每个的*1.5倍，这个可变$(value).css({"animation":`ani${index}${aniList[aniTime]}slinear${index*1.5}s`,"-webkit-animation":`ani${index}${aniList[aniTime]}slinear${index*1.5}s`});})

以上是“如何实现HTML5移动端弹幕动画效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！