用CSS3實現彈幕效果

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

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

1.首先建立彈幕區域

<p>
</p><p>
<!--//弹幕内容-->
</p>

<input>
<button>说两句</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 ';
$('.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來建立彈幕的行數，然後在每行裡面加上彈幕，並加入對應的動畫。當一個動畫執行完畢後，將彈幕移回原處，更換彈幕內容，重新執行動畫，這樣避免了彈幕重疊。每條彈幕動畫執行時間是根據彈幕長度決定的。

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

推薦閱讀：

你不知道的冷門CSS屬性

CSS定製文字省略的方法

以上是用CSS3實現彈幕效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！