项目需要实现弹幕，网上参考了各种方法，最后觉得transform+transition实现的效果在移动设备上性能最好，在iphone6和红米4上测试，看不到卡顿的感觉。用jquery的animate动画在移动设备上有明显的卡顿。本文主要介绍了css3 实现弹幕的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
1.首先创建弹幕区域
>
登录后复制
2.css
.webPage .barrage{width:100%;height:22%;position: absolute; bottom: 50px; background-color: transparent;pointer-events: none;}.webPage .barrage .mask{width:100%;height:100%;background:transparent;z-index:100;}
登录后复制
注：以上html,css根据自己需求来即可
3.js
立即学习“前端免费学习笔记（深入）”；
$scope.data = {comment:''};$scope.danmuCount = 5; //最大弹幕行数$scope.danmus = ['1545466666还是','9777777','哈哈哈哈哈','对企业读完后环球网好齐齐哈','42115我我我5','556噢噢噢噢45','54哦','54545646','666但近段时间66','56565','454465465565', '1545466666还是','9777777','哈哈哈哈哈','对企业读完后环球网好齐齐哈','42115我我我5','556噢噢噢噢45','54哦','54545646','666但近段时间66','56565','454465465565']; //弹幕数据源//创建弹幕区域$scope.createDanmuContent = function () {var height = 1 / $scope.danmuCount * 100 + '%';for (var i = 0; i ';$('.mask').append(item);} $scope.createDanmu ();};//开始弹幕绘制$scope.createDanmu = function () {var maxCount = 0;if ($scope.danmus.length > $scope.danmuCount) { maxCount = $scope.danmuCount; } else {maxCount = $scope.danmus.length;}var _left = window.screen.width;for (var i = 0; i "+$scope.danmus[i]+"");$(".mask p").each(function () {//检测该区域是否绘制了弹幕if ($scope.checkDanmu($(this))) {$(this).append(_lable);$scope.moveArray(i); i--;return false;}});}$scope.init_barrage();};//将数组第一位放到最后一位,（因弹幕池内容太少，所以没删除已显示的弹幕）$scope.moveArray = function (i) { var temp = $scope.danmus[i];$scope.danmus.splice(i,1);$scope.danmus.push(temp);}//判断content区域有没有弹幕$scope.checkDanmu = function (el) {return el.find('p').length == 0 ? true : false;};//获取随机颜色$scope.getRandomColor = function () {return '#' + (function(h){return new Array(7 - h.length).join("0") + h})((Math.random() * 0x1000000 0) {el.css({'transform':'translateX(0px)','transition':'all 0ms linear','-webkit-transform':'translateX(0px)','-webkit-transition':'all 0ms linear','-moz-transform':'translateX(0px)','-moz-transition':'all 0ms linear','-ms-transform':'translateX(0px)','-ms-transition':'all 0ms linear'});$scope.resetAnimate(el);} else {el.remove();}},time);};//更换弹幕内容，重新开始弹幕动画$scope.resetAnimate = function (el) {el.html($scope.danmus[0]);$scope.moveArray(0);var _moveLeft = el.width() + screen.width;var time = 100000 / el.width() + 5000;$scope.addCssAnimate(el,_moveLeft,time);};//评论，添加弹幕$scope.addDanmu = function () {var text = $scope.data.comment;if(text == ""){return;}$scope.danmus.unshift(text);};$scope.createDanmuContent();
登录后复制
至此，功能基本实现了。要关闭弹幕只需移除弹幕的区域，文中就没有写了。
逻辑：首先根据$scope.danmuCount来创建弹幕的行数，然后在每行里面添加弹幕，并添加相应的动画。当一个动画执行完毕后，将弹幕移回原处，更换弹幕内容，重新执行动画，这样避免了弹幕重叠。每条弹幕动画执行时间是根据弹幕长度决定的。
个人经验，希望大家指出不足。上述代码使用的angularjs，但逻辑都是一样
相关推荐:
HTML5文字弹幕效果
HTML5文字弹幕效果
HTML5文字弹幕效果
以上就是实例详解CSS3 实现弹幕的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2901239.html
