HTML5 réalise un effet d'animation de barrage de terminal mobile

1. Modifiez le contenu individuel, calculez sa propre largeur et déterminez la position initiale.

2. La distance parcourue est la largeur de l'écran

3.js ajoute dynamiquement des fonctions d'animation CSS pour contrôler la hauteur, le temps de mouvement de l'animation et le temps de retard de l'animation avec des nombres aléatoires.

(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>La période de remboursement mensuelle Huabei est ici<i>Hahaha</i></span> </div> <div class=barrage-div> <img src=http://kw1-1253445850 .file.myqcloud. com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg/> <span>En attente de salaire<i>Hehehe</i></span> </div> <div class=barrage-div> <img src=../../static/cutePresent/resource/avatar.png / > <span>Devenez riche, devenez riche<i>Ouais ouais ouais</i></span> </div></div>

.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, de gauche à droite, c'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;

 //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'; //Récupérez les nombres aléatoires de 0, 1, 2 et modifiez-les 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, n'oubliez pas de distinguer chaque ani et déplacez la largeur de sa propre largeur négative d'une distance de tout l'écran var keyframes = `/ @keyframes ani${index}{ form{ right : ${-width}px ; right:${winWidth}px; } }/ @-webkit-keyframes ani${index}{ right:${-width}px } to{ 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`});})

Ce qui précède est l'implémentation HTML5 des effets d'animation de barrage mobile introduite par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra à temps. Je tiens également à remercier tout le monde pour votre soutien au site d'arts martiaux VeVb !

Si vous pensez que cet article vous est utile, n'hésitez pas à le réimprimer, veuillez indiquer la source, merci !