Durante meu estágio anterior, tive a necessidade de incorporar uma página H5 no lado do Android para realizar a entrada de voz e incluir animação e bolas saltitantes durante a entrada. Através da consulta de diversos materiais e com base em cenários reais de procura, a sua função foi finalmente concretizada. Vamos revisar e registrar aqui.
Primeiro, perceba o bater de uma única bola.
Análise: A bola começa no topo, chega ao fundo no meio do período e finalmente retorna ao topo, e é um loop infinito. Conseguido combinando o posicionamento relativo com quadros-chave CSS3.
<div class="bola"></div>
.bola {
largura: 20px;
altura: 20px;
raio da fronteira: 50%;
posição: relativa;
nome da animação: saltando; // Nome da animação duração da animação: 1,6s; // Duração única da animação-contagem de iterações: infinito; cor}
//Animação de quadro-chave @keyframes saltando {
0% {
top: 0px; //Inicialmente no topo}
50% {
topo: 100px; // meio na parte inferior}
100% {
top: 0px; // Finalmente retorna ao topo}
}Análise: Várias bolinhas batem ao mesmo tempo e o posicionamento relativo precisa ser diferente. Em segundo lugar, há uma diferença de tempo na animação de cada bolinha.
/** bolas = [1,2,3,4,5] múltiplas bolas*/
<div v-for="bola em bolas" :key="bola" :class="['bola', `bola${bola}`]"></div> //Extração de estilo público.ball {
largura: 20px;
altura: 20px;
raio da fronteira: 50%;
posição: relativa;
nome da animação: saltando; // Nome da animação duração da animação: 1,6s; // Duração da animação única animação-contagem de iterações: infinito;
.bola1 {
@extend .ball;
esquerda: 0;
plano de fundo: rgb(244, 7, 7);
}
.bola2 {
@extend .ball;
atraso de animação: 0,25s; // atraso de animação restante: 30px;
plano de fundo: rgb(16, 106, 241);
}
.bola3 {
@extend .ball;
atraso de animação: 0,5s; // atraso de animação restante: 60px;
plano de fundo: rgb(251, 236, 13);
}
.bola4 {
@extend .ball;
atraso de animação: 0,75s; // atraso de animação restante: 90px;
plano de fundo: rgb(233, 23, 233);
}
.bola5 {
@extend .ball;
atraso de animação: 1,0s; // atraso de animação restante: 120px;
plano de fundo: rgb(6, 247, 6);
}
//Animação de quadro-chave @keyframes saltando {
0% {
top: 0px; //Inicialmente no topo}
50% {
superior: 100px; // meio na parte inferior}
100% {
top: 0px; // Finalmente retorna ao topo}
}Demonstração
Análise: monitoramento de eventos de vinculação, a animação de pressionamento longo do botão é exibida e a animação de liberação do botão é ocultada.
Por fim, é hora de colocá-lo em uso e ver o efeito alcançado.
<el-button id="bouncingBallBtn">Entrada de voz</el-button> <bola saltitante v-if="showBouncing" />
/** data showBouncing: falso */
montado() {
deixe theBouncingBtn = document.getElementById("bouncingBallBtn");
//Terminal móvel theBouncingBtn.addEventListener("touchstart", this.startBouncing, false);
theBouncingBtn.addEventListener("touchend", this.endBouncing, false);
// Lado do PC theBouncingBtn.addEventListener("mousedown", this.startBouncing, false);
theBouncingBtn.addEventListener("mouseup", this.endBouncing, false);
}
/** Exibição da animação*/
startBouncing(evento) {
event.preventDefault();
this.showBouncing = verdadeiro;
},
/** Animação ocultada*/
endBouncing(evento) {
event.preventDefault();
this.showBouncing = falso;
},Isso conclui este artigo sobre animação CSS3 para implementar várias bolas saltitantes (animação de entrada de voz). Para obter mais informações sobre bolas saltitantes CSS3, pesquise os artigos anteriores em downcodes.com ou continue navegando nos artigos relacionados abaixo. com mais no futuro!