On sait que 20 contenus doivent avoir un effet de barrage, répartis en trois couches, et la vitesse est aléatoire. Voyons d’abord l’effet :
Par conséquent, le remplissage de ceux générés n’est pas pris en compte ici. Juste un effet d'affichage. Si vous voulez voir ce que vous avez rempli, ne perdez pas votre temps.
Idéescode
structure du squelette HTML
(C'est trop long. Prenez-en trois comme exemple. Si vous pensez que l'interface est trop longue et peu conviviale, vous pouvez également la générer dynamiquement avec js)
<div class=cute-barrage><div class=barrage-div><img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg/><span>Momoda retire <i>pièces 1Q aujourd'hui</i></span></div> <div class=barrage-div><img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg/><span>Le chat orange aux grandes oreilles retire des <i>pièces de 5Q aujourd'hui</i></span>< /div><div class=barrage-div><img src=../../static/cutePresent/resource/avatar.png/><span>丶Le pot de cerf contient un sac de lait Wu. Retirez les <i>pièces 3Q aujourd'hui</i></span></div>. < /div>
style css
.cute-barrage détermine la plage et la position d'affichage, la largeur est de 100 %, la hauteur est personnalisée et la partie au-delà de la direction horizontale est masquée.
Partie de contenu .barrage-div , la longueur est déterminée par le contenu et la position par rapport au parent est déterminée
html,body{ width:100%;}.cute-barrage{ width: 100%; height: 4rem; /*déterminer la longueur du barrage*/ position: top: 1.5rem; barrage*/ left : 0; overflow-x: Hidden; /*Masquer la partie horizontale en excès*/ .barrage-div{ position: top: 0 right: -100%; /* Assurez-vous qu'il est en dehors de l'interface au début, de droite à gauche est à droite, de gauche à droite est à gauche*/ height: 0.6rem; background-color: rgba(255, 255, 255, 0.9); radius: 2rem; white-space: nowrap; /*Assurez-vous que le contenu est affiché sur une seule ligne, sinon il sera renvoyé à la fin*/ img{ width: 0.5rem; vertical-align: middle; //Élément de bloc en ligne, alignement centré padding-left: 0.05rem; border-radius: 50%; span{ font-size: 14px; //Éléments de bloc en ligne, quatre éléments alignés au centre sont indispensables height: 0.6rem; //Éléments de bloc en ligne, quatre éléments alignés au centre sont indispensables. inline-block; //Éléments de bloc en ligne, quatre alignements en ligne sont indispensables vertical-align: middle; //Éléments de bloc en ligne, quatre alignements en ligne sont indispensables i{ color: #fe5453;js implémentation d'animation dynamique (zepto.js)
//Barrage var winWidth = $(window).width(); //Obtenir la largeur de l'écran $(.barrage-div).each(function(index,value){ //Traverser chaque barrage var width = $(value) .width(); //Obtenir la largeur du barrage actuel var topRandom = Math.floor(Math.random() * 3) + 'rem'; //Obtenez le nombre aléatoire de 0,1,2 et modifiez-le en fonction de la situation $(value).css({right:-width,top:topRandom}); //Déplacez le barrage vers l'extérieur de l'écran, juste au-delà de la position // Fonction de cadre d'animation Spell, rappelez-vous que chaque ani doit être distingué et que la largeur se déplace de sa propre largeur négative d'une distance de tout l'écran var keyframes = `/ @keyframes ani${index}{ form{ à droite : ${-width}px ; right:${winWidth}px; } }/ @-webkit-keyframes ani${index}{ form{ right:${-width}px; à{ right:${winWidth}px } }`; Ajouter à la balise head de la page $(<style>).attr(type,text/css).html(keyframes).appendTo($(head)); //Définir la liste des vitesses d'animation var aniList = [3,5,7,9,11]; //Obtenir des nombres aléatoires du tableau, 0,1,2,3,4 var aniTime =Math.floor(Math.random() * 5); Give Lors de l'ajout d'une animation CSS au barrage frontal complet //Le temps de retard est *1,5 fois de chacun, cette variable $(value).css({animation:`ani${index} ${aniList[aniTime]}s linéaire ${index * 1.5}s`,-webkit-animation:`ani${index} ${aniList[aniTime]}s linéaire ${index * 1.5}s`});})Jetez ensuite un œil à l'effet navigateur :
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.