Sabe-se que 20 conteúdos devem ter efeito barragem, divididos em três camadas, e a velocidade é aleatória. Vamos dar uma olhada no efeito primeiro:
Portanto, o preenchimento dos gerados não é considerado aqui. Apenas um efeito de exibição. Se você quiser ver o que preencheu, não perca tempo.
Ideiascódigo
estrutura de esqueleto html
(É muito longo. Tomemos três como exemplo. Se você acha que a interface é muito longa e hostil, você também pode gerá-la dinamicamente com js)
<div class=cute-barrage><div class=barrage-div><img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_7656dc02eb1cd13adbacbdd2695dc3a8.jpg/><span>Momoda retira <i>1Q coins hoje</i></span></div> <div class=barrage-div><img src=http://kw1-1253445850.file.myqcloud.com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg/><span>O gato laranja com orelhas grandes retira <i>moedas de 5Q hoje</i></span>< /div><div class=barrage-div><img src=../../static/cutePresent/resource/avatar.png/><span>丶O pote de veado contém saco de leite Wu Retire <i>moedas 3Q hoje</i></span></div>. </div>
estilo css
.cute-barrage determina o alcance e a posição da exibição, a largura é 100%, a altura é personalizada e a parte além da direção horizontal fica oculta.
Parte do conteúdo .barrage-div , o comprimento é determinado pelo conteúdo e a posição relativa ao pai é determinada
html,body{ width:100%;}.cute-barrage{ width: 100% height: 4rem; barragem*/ esquerda: 0; overflow-x: oculto /*Ocultar a parte excedente horizontal*/ .barrage-div{ posição: topo absoluto: 0; /* Certifique-se de que está fora da interface no início, da direita para a esquerda é a direita, da esquerda para a direita é a esquerda*/ height: 0.6rem background-color: rgba(255, 255, 255, 0.9); radius: 2rem; white-space: nowrap; /*Certifique-se de que o conteúdo seja exibido em uma linha, caso contrário ele será quebrado quando movido para o final*/ img{ width: 0.5rem height: 0.5rem; vertical-align: middle; //Elemento de bloco embutido, alinhamento centralizado padding-left: 0,05rem; border-radius: 50%; span{ font-size: 14px; //Elementos de bloco embutidos, quatro elementos alinhados ao centro são indispensáveis height: 0.6rem; //Elementos de bloco embutidos, quatro elementos alinhados ao centro são indispensáveis: inline-block; //Elementos de bloco inline, quatro alinhamentos inline são indispensáveis vertical-align: middle; //Elementos de bloco inline, quatro alinhamentos inline são indispensáveis i{ color: #fe5453;implementação de animação dinâmica js (zepto.js)
//Barrage var winWidth = $(window).width(); //Obter a largura da tela $(.barrage-div).each(function(index,value){ //Percorrer cada barragem var width = $( value) .width(); //Obtém a largura da barragem atual var topRandom = Math.floor(Math.random() * 3) + 'rem'; //Obtenha o número aleatório 0,1,2 e altere-o de acordo com a situação $(value).css({right:-width,top:topRandom}); //Mova a barragem para fora da tela, logo além da posição // Soletre a função de quadro de animação, lembre-se de que cada ani deve ser distinguido e a largura se move de sua própria largura negativa por uma distância da tela inteira var keyframes = `/ @keyframes ani${index}{ form{ direita:${-largura}px } para{ direita:${winWidth}px } }/ @-webkit-keyframes ani${index}{ form{ direita:${-width}px } para{ direita:${winWidth}px; Adicione à tag head da página $(<style>).attr(type,text/css).html(keyframes).appendTo($(head)); aniList = [3,5,7,9,11]; //Obter números aleatórios do array, 0,1,2,3,4 var aniTime =Math.floor(Math.random() * 5); Dê Ao adicionar animação css à barragem frontal completa //O tempo de atraso é *1,5 vezes de cada, esta variável $(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`});})Então dê uma olhada no efeito do navegador:
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.