Se sabe que 20 contenidos deben tener un efecto de bombardeo, divididos en tres capas, y la velocidad es aleatoria. Primero echemos un vistazo al efecto:
Por lo tanto, aquí no se considera completar los generados. Sólo un efecto de visualización. Si desea ver lo que completó, no pierda el tiempo.
Ideascódigo
estructura esqueleto html
(Es demasiado largo. 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=lindo-aluvión><div class=aluvión-div><img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg/><span>Momoda retira <i>monedas del primer trimestre hoy</i></span></div> <div clase=aluvión-div><img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg/><span>El gato naranja con orejas grandes retira <i>monedas 5Q hoy</i></span>< /div><div class=barrage-div><img src=../../static/cutePresent/resource/avatar.png/><span>丶La bolsa de leche Wu en la olla de ciervo se retira hoy<i>monedas 3Q</i></span></div >< /div>
estilo css
.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 ;Implementación de animación dinámica js (zepto.js)
//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`});})Luego eche un vistazo al efecto del navegador:
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.