HTML5 realisiert den Sperranimationseffekt für mobile Endgeräte

1. Bearbeiten Sie den einzelnen Inhalt, berechnen Sie seine eigene Breite und bestimmen Sie die Ausgangsposition.

2. Die zurückgelegte Distanz entspricht der Bildschirmbreite

3.js fügt dynamisch CSS-Animationsfunktionen hinzu, um die Höhe, die Animationsbewegungszeit und die Animationsverzögerungszeit mit Zufallszahlen zu steuern.

(Nehmen Sie drei als Beispiel. Wenn Sie der Meinung sind, dass die Schnittstelle zu lang und unfreundlich ist, können Sie sie auch dynamisch mit js generieren.)

 <div class=cute-barrage> <div class=barrage-div> <img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg/> <span>Die monatliche Huabei-Rückzahlungsfrist ist hier<i>Hahaha</i></span> </div> <div class=barrage-div> <img src=http://kw1-1253445850 .file.myqcloud. com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg/> <span>Warten auf Gehalt<i>Hehehe</i></span> </div> <div class=barrage-div> <img src=../../static/cutePresent/resource/avatar.png / > <span>Werde reich, werde reich<i>Ja, ja, ja</i></span> </div></div>

.cute-barrage bestimmt den Anzeigebereich und die Position, die Breite beträgt 100 %, die Höhe wird angepasst und der Teil außerhalb der horizontalen Richtung wird ausgeblendet.

.barrage-div Inhaltsteil, die Länge wird durch den Inhalt bestimmt und die Position relativ zum übergeordneten Element wird bestimmt

 html,body{ width:100%;}.cute-barrage{ width: 100%; height: 4rem; /*bestimmen Sie die Länge des Sperrfeuers*/ position: absolute; /*bestimmen Sie die Höhe des barrage*/ left : 0; overflow-x: versteckt; /*Den horizontalen überschüssigen Teil ausblenden*/ .barrage-div{ position: absolute; /* Stellen Sie sicher, dass es sich am Anfang außerhalb der Schnittstelle befindet, von rechts nach links ist es rechts, von links nach rechts ist es links*/ height: 0.6rem; radius: 2rem; white-space: nowrap; /*Stellen Sie sicher, dass der Inhalt in einer Zeile angezeigt wird, sonst wird er umbrochen, wenn er an das Ende verschoben wird*/ img{ width: 0.5rem; Vertical-Align: middle; //Inline-Block-Element, zentrierte Ausrichtung padding-left: 0.05rem; //Inline-Blockelemente, vier mittig ausgerichtete Elemente sind unverzichtbar. Höhe: 0,6rem; //Inline-Blockelemente, vier mittig ausgerichtete Elemente sind unverzichtbar. inline-block; //Inline-Blockelemente, vier Inline-Ausrichtungen sind unverzichtbar: middle; //Inline-Blockelemente, vier Inline-Ausrichtungen sind unverzichtbar i{ color: #fe5453;

 //Barrage var winWidth = $(window).width(); //Ermitteln Sie die Bildschirmbreite $(.barrage-div).each(function(index,value){ //Durchlaufen Sie jede Barrage var width = $( value) .width(); //Erhalte die Breite des aktuellen Sperrfeuers var topRandom = Math.floor(Math.random() * 3) + 'rem'; //Erhalte die Zufallszahlen 0, 1, 2 und ändere sie entsprechend der Situation $(value).css({right:-width,top:topRandom}); //Bewege das Sperrfeuer an die Außenseite des Bildschirms, direkt hinter der Position // Animationsrahmenfunktion buchstabieren, denken Sie daran, jede Ani zu unterscheiden und die Breite von ihrer eigenen negativen Breite um einen Abstand des gesamten Bildschirms zu verschieben var keyframes = `/ @keyframes ani${index}{ form{ right: ${-width}px } bis{ right:${winWidth}px; }/ @-webkit-keyframes ani${index}{ form{ right:${-width}px }; Zum Head-Tag der Seite hinzufügen $(<style>).attr(type,text/css).html(keyframes).appendTo($(head)); //Animationsgeschwindigkeitsliste var definieren aniList = [3,5,7,9,11]; //Zufallszahlen aus dem Array abrufen, 0,1,2,3,4 var aniTime =Math.floor(Math.random() * 5); Geben Sie beim Hinzufügen von Animations-CSS zum gesamten vorderen Sperrfeuer //Die Verzögerungszeit beträgt jeweils das 1,5-fache, diese Variable $(value).css({animation:`ani${index} ${aniList[aniTime]}s linear ${index * 1.5}s`,-webkit-animation:`ani${index} ${aniList[aniTime]}s linear ${index * 1.5}s`});})

Das Obige ist die vom Herausgeber eingeführte HTML5-Implementierung der mobilen Sperranimationseffekte. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten. Ich möchte mich auch bei allen für die Unterstützung der VeVb-Kampfsport-Website bedanken!

Wenn Sie der Meinung sind, dass dieser Artikel für Sie hilfreich ist, können Sie ihn gerne erneut drucken. Bitte geben Sie die Quelle an. Vielen Dank!