Verwenden Sie CSS3, um einen Sperreffekt zu erzielen

Dieses Mal werde ich Ihnen die Verwendung von CSS3 zur Erzielung des Sperreffekts vorstellen. Was sind die Vorsichtsmaßnahmen für die Verwendung von CSS3 zur Erzielung des Sperreffekts? Das Folgende ist ein praktischer Fall .

Vor Kurzem habe ich verschiedene Methoden online konsultiert. Schließlich habe ich das Gefühl, dass der durch Transform+Transition erzielte Effekt auf mobilen Geräten am besten ist und Redmi 4, und es war keine Verzögerung sichtbar. Auf Mobilgeräten, die die animierte Animation von jquery verwenden, kommt es offensichtlich zu Verzögerungen.

1. Erstellen Sie zuerst den Sperrbereich

<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;}

Hinweis: das Obige HTML, CSS können an Ihre eigenen Bedürfnisse angepasst werden

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 = &#39;<p style="width: 100%; height: &#39;+height+&#39;"></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=&#39;margin: 0;position: absolute;opacity:1;display:table;left: "+_left + &#39;px&#39;+&#39;;color:&#39;+$scope.getRandomColor()+"&#39;>"+$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({
&#39;transform&#39;:&#39;translateX(&#39;+-_moveLeft+&#39;px)&#39;,
&#39;transition&#39;:&#39;all &#39;+time+&#39;ms&#39;+ &#39; linear&#39;,
&#39;-webkit-transform&#39;:&#39;translateX(&#39;+-_moveLeft+&#39;px)&#39;,
&#39;-webkit-transition&#39;:&#39;all &#39;+time+&#39;ms&#39;+ &#39; linear&#39;,
&#39;-moz-transform&#39;:&#39;translateX(&#39;+-_moveLeft+&#39;px)&#39;,
&#39;-moz-transition&#39;:&#39;all &#39;+time+&#39;ms&#39;+ &#39; linear&#39;,
&#39;-ms-transform&#39;:&#39;translateX(&#39;+-_moveLeft+&#39;px)&#39;,
&#39;-ms-transition&#39;:&#39;all &#39;+time+&#39;ms&#39;+ &#39; linear&#39;
});
//当动画执行完毕后，将弹幕移到原处，更换弹幕文字，重新开始执行动画，相当于对原本弹幕的复用
$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();

An diesem Punkt ist die Funktion grundsätzlich realisiert. Um die Sperre zu schließen, müssen Sie lediglich den Sperrbereich entfernen, der im Artikel nicht erwähnt wird.

Logik: Erstellen Sie zunächst die Anzahl der Sperrlinien basierend auf $scope.danmuCount, fügen Sie dann Sperren zu jeder Zeile hinzu und fügen Sie entsprechende Animationen hinzu. Wenn eine Animation abgeschlossen ist, bewegen Sie das Sperrfeuer zurück in seine ursprüngliche Position, ändern Sie den Inhalt des Sperrfeuers und führen Sie die Animation erneut aus, um so eine Überlappung des Sperrfeuers zu vermeiden. Die Ausführungszeit jeder Sperrfeueranimation wird durch die Länge des Sperrfeuers bestimmt.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Unpopuläre CSS-Eigenschaften, die Sie nicht kennen

So passen Sie Textauslassungen in CSS an

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS3, um einen Sperreffekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!