用CSS3實現彈幕效果

這次給大家帶來用CSS3實現彈幕效果，用CSS3實現彈幕效果的注意事項有哪些，下面就是實戰案例，一起來看一下。

最近需要項目需要實現彈幕，網上參考了各種方法，最後覺得transform+transition實現的效果在行動裝置上效能最好，在iphone6和紅米4上測試，看不到卡頓的感覺。用jquery的animate動畫在行動裝置上有明顯的卡頓。

1.首先建立彈幕地區

<p class="barrage"><p class="mask"><!--//彈幕內容--></p></p><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 = '<p style="width: 100%; height: '+height+'"></p>';$('.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 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).toString(16))};//初始化彈幕參數$scope.init_barrage = function () {$(".mask p 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();

至此，功能基本實現了。要關閉彈幕只需移除彈幕的地區，文中就沒有寫了。

邏輯：首先根據$scope.danmuCount來建立彈幕的行數，然後在每行裡面添加彈幕，並添加相應的動畫。當一個動畫執行完畢後，將彈幕移回原處，更換彈幕內容，重新執行動畫，這樣避免了彈幕重疊。每條彈幕動畫執行時間是根據彈幕長度決定的。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

你不知道的冷門CSS屬性

CSS定製文本省略的方法