HTML5 realiza efeito de animação de barragem de terminal móvel

1. Edite o conteúdo individual, calcule sua própria largura e determine a posição inicial.

2. A distância percorrida é a largura da tela

3.js adiciona dinamicamente funções de animação CSS para controlar a altura, o tempo de movimento da animação e o tempo de atraso da animação com números aleatórios.

(Tome 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>O período de reembolso mensal da Huabei está aqui<i>Hahaha</i></span> </div> <div class=barrage-div> <img src=http://kw1-1253445850 .file.myqcloud. com/static/image/stimg_632fecdcb52417cb8ab89fa283e07281.jpg/> <span>Esperando salário<i>Hehehe</i></span> </div> <div class=barrage-div> <img src=../../static/cutePresent/resource/avatar.png / > <span>Fique rico, fique rico<i>Sim, sim, sim</i></span> </div></div>

.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;

 //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 os números aleatórios de 0, 1, 2 e altere-os 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 distinguir cada ani e mova a largura de sua própria largura negativa por uma distância da tela inteira var keyframes = `/ @keyframes ani${index}{ form{ right: ${-largura}px; 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`});})

O texto acima é a implementação HTML5 de efeitos de animação de barragem móvel introduzida pelo editor. Espero que seja útil para você. Se você tiver alguma dúvida, deixe-me uma mensagem e o editor responderá a tempo. Gostaria também de agradecer a todos pelo apoio ao site de artes marciais VeVb!

Se você acha que este artigo é útil para você, fique à vontade para reimprimi-lo, indique a fonte, obrigado!