使用CSS3怎么实现一个弹幕功能

本篇文章给大家分享的是有关使用css3怎么实现一个弹幕功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

1.首先创建弹幕区域

<div class="barrage"><div class="mask"><!--//弹幕内容--></div></div><input type="text" ng-model="data.comment"/><button ng-click="aDDDanmu()">说两句</button >

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 < $scope.danmuCount; i++) {var item = '<div style="width: 100%; height: '+height+'"></div>';$('.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 < maxCount; i++) {var _lable = $("<p style='margin: 0;position: absolute;opacity:1;display:table;left: "+_left + 'px'+';color:'+$scope.getRandomColor()+"'>"+$scope.danmus[i]+"</p>");$(".mask div").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).toString(16))};//初始化弹幕参数$scope.init_barrage = function () {$(".mask div p").show().each(function() { var _moveLeft = window.screen.width+$(this).width();var time = 100000 / $(this).width() + 5000;//弹幕滑动时间$scope.addCssAnimate($(this),_moveLeft,time);});};//添加弹幕动画$scope.addCssAnimate = function (el,_moveLeft,time) {el.css({'transfORM':'translateX('+-_moveLeft+'px)','transition':'all '+time+'ms'+ ' linear','-webkit-transform':'translateX('+-_moveLeft+'px)','-webkit-transition':'all '+time+'ms'+ ' linear','-moz-transform':'translateX('+-_moveLeft+'px)','-moz-transition':'all '+time+'ms'+ ' linear','-ms-transform':'translateX('+-_moveLeft+'px)','-ms-transition':'all '+time+'ms'+ ' linear'});//当动画执行完毕后，将弹幕移到原处，更换弹幕文字，重新开始执行动画，相当于对原本弹幕的复用$timeout(function () {//判断弹幕池是否还有内容，如果没有则移除弹幕if ($scope.danmus.length > 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();

以上就是使用CSS3怎么实现一个弹幕功能，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网精选频道。