HTML5 realiza un efecto de animación de bombardeo de terminales móviles

1. Edite el contenido individual, calcule su propio ancho y determine la posición inicial.

2. La distancia recorrida es el ancho de la pantalla.

3.js agrega dinámicamente funciones de animación CSS para controlar la altura, el tiempo de movimiento de la animación y el tiempo de retraso de la animación con números aleatorios.

(Tome tres como ejemplo. Si cree que la interfaz es demasiado larga y poco amigable, también puede generarla dinámicamente con js)

 <div class=cute-barrage> <div class=barrage-div> <img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg/> <span>El período de pago mensual de Huabei está aquí<i>Jajaja</i></span> </div> <div class=barrage-div> <img src=http://kw1-1253445850 .file.myqcloud. com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg/> <span>Esperando salario<i>Jejeje</i></span> </div> <div class=barrage-div> <img src=../../static/cutePresent/resource/avatar.png / > <span>Hazte rico, hazte rico<i>Sí, sí, sí</i></span> </div></div>

.cute-barrage determina el rango y la posición de visualización, el ancho es 100%, la altura se personaliza y la parte más allá de la dirección horizontal se oculta.

Parte de contenido .barrage-div, la longitud está determinada por el contenido y la posición relativa al padre está determinada

 html,body{ ancho:100%;}.cute-barrage{ ancho: 100%; altura: 4rem; /*determina la longitud del bombardeo*/ posición: absoluta; 1.5rem; bombardeo*/ izquierda: 0; overflow-x: oculto /*Ocultar la parte sobrante horizontal*/ .barrage-div{ posición: superior: 0; /* Asegúrese de que esté fuera de la interfaz al principio, de derecha a izquierda es derecha, de izquierda a derecha es izquierda*/ height: 0.6rem background-color: rgba(255, 255, 255, 0.9); radio: 2rem; espacio en blanco: nowrap; /*Asegúrese de que el contenido se muestre en una línea; de lo contrario, se ajustará cuando se mueva hasta el final*/ img{ ancho: 0.5rem; vertical-align: middle; // Elemento de bloque en línea, alineación centrada padding-left: 0.05rem; border-radius: 50%; span{ font-size: 14px; // Elementos de bloque en línea, cuatro elementos alineados al centro son indispensables height: 0.6rem; // Elementos de bloque en línea, cuatro elementos alineados al centro son indispensables. inline-block; // Elementos de bloque en línea, cuatro alineaciones en línea son indispensables vertical-align: middle; // Elementos de bloque en línea, cuatro alineaciones en línea son indispensables i{ color: #fe5453; font-weight: 700 ;

 //Barrage var winWidth = $(window).width(); //Obtener el ancho de la pantalla $(.barrage-div).each(function(index,value){ //Recorrer cada bombardeo var width = $( value) .width(); //Obtener el ancho del bombardeo actual var topRandom = Math.floor(Math.random() * 3) + 'rem'; //Obtiene los números aleatorios de 0, 1, 2 y cámbialos según la situación $(value).css({right:-width,top:topRandom}); //Mueve el bombardeo hacia el exterior de la pantalla, justo más allá de la posición // Deletrea la función de cuadro de animación, recuerda distinguir cada ani y mover el ancho de su propio ancho negativo a una distancia de toda la pantalla var keyframes = `/ @keyframes ani${index}{ form{ right: ${-ancho}px; } a{ derecha:${winWidth}px; } }/ @-webkit-keyframes ani${index}{ formulario{ derecha:${-width}px } a{ derecha:${winWidth}px; Agregar a la etiqueta principal de la página $(<style>).attr(type,text/css).html(keyframes).appendTo($(head) //Definir la lista de velocidades de animación var; aniList = [3,5,7,9,11]; //Obtiene números aleatorios de la matriz, 0,1,2,3,4 var aniTime =Math.floor(Math.random() * 5); Dar Al agregar animación css al bombardeo frontal completo // El tiempo de retraso es *1,5 veces de cada uno, esta variable $(value).css({animation:`ani${index} ${aniList[aniTime]}s lineal ${index * 1.5}s`,-webkit-animation:`ani${index} ${aniList[aniTime]}s lineal ${index * 1.5}s`});})

Lo anterior es la implementación HTML5 de los efectos de animación de bombardeo móvil introducidos por el editor. Espero que le resulte útil. Si tiene alguna pregunta, déjeme un mensaje y el editor le responderá a tiempo. ¡También me gustaría agradecer a todos por su apoyo al sitio web de artes marciales VeVb!

Si cree que este artículo le resulta útil, puede reimprimirlo. Indique la fuente, ¡gracias!