Es ist bekannt, dass 20 Inhalte einen Sperreffekt haben müssen, in drei Schichten unterteilt sind und die Geschwindigkeit zufällig ist. Werfen wir zunächst einen Blick auf die Wirkung:
Daher wird das Ausfüllen der generierten hier nicht berücksichtigt. Nur ein Anzeigeeffekt. Wenn Sie sehen möchten, was Sie ausgefüllt haben, verschwenden Sie bitte keine Zeit.
IdeenCode
HTML-Skelettstruktur
(Es ist zu lang. 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>Momoda zieht heute <i>1Q-Münzen</i></span></div> <div class=barrage-div><img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg/><span>Die orangefarbene Katze mit den großen Ohren zieht heute <i>5Q-Münzen</i></span>< ab /div><div class=barrage-div><img src=../../static/cutePresent/resource/avatar.png/><span>丶Der Hirschtopf enthält Wu-Milchbeutel. Heben Sie noch heute <i>3Q-Münzen</i></span></div> ab < /div>
CSS-Stil
.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 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 umgebrochen, 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;js dynamische Animationsimplementierung (zepto.js)
//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 Zufallszahl von 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, dass jede Ani unterschieden werden muss und die Breite sich von ihrer eigenen negativen Breite um einen Abstand des gesamten Bildschirms bewegt var keyframes = `/ @keyframes ani${index}{ form{ right:${-width}px } to{ 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 vollständigen 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`});})Dann schauen Sie sich den Browsereffekt an:
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.