Lors de mon précédent stage, j'avais besoin d'intégrer une page H5 côté Android pour réaliser la saisie vocale et inclure des animations et des balles sautantes lors de la saisie. En consultant divers matériaux et sur la base de scénarios de demande réels, sa fonction a finalement été réalisée. Examinons-le et enregistrons-le ici.
Tout d’abord, réalisez le battement d’une seule balle.
Analyse : Le ballon commence par le haut, atteint le bas au milieu, et revient enfin vers le haut, et c'est une boucle infinie. Obtenu en combinant le positionnement relatif avec des images clés CSS3.
<div class="balle"></div>
.balle {
largeur : 20 px ;
hauteur : 20px ;
rayon de bordure : 50 % ;
position : relative ;
animation-name: bouncing; // Nom de l'animation animation-duration: 1.6s; // Durée d'animation unique animation-iteration-count: infinite; // Animation en boucle infinie: rgb(244, 7, 7); couleur}
//Animation d'images clés @keyframes rebondissant {
0% {
top: 0px; //Initialement en haut}
50% {
haut : 100 px ; // milieu en bas}
100 % {
top: 0px; // Enfin, retour en haut}
}Analyse : plusieurs balles sautent en même temps et le positionnement relatif doit être différent. Deuxièmement, il y a une différence de temps au début de chaque animation de balle, et la seconde est la couleur de la balle.
/** balles = [1,2,3,4,5] plusieurs balles*/
<div v-for="balle dans les boules" :key="balle" :class="['ball', `ball${ball}`]"></div> //Extraction de style public.ball {
largeur : 20 px ;
hauteur : 20px ;
rayon de bordure : 50 % ;
position : relative ;
nom de l'animation : rebond ; // Nom de l'animation durée-d'animation : 1,6 s ; // Durée d'animation unique nombre d'itérations d'animation : infini // Boucle infinie d'animation}
.balle1 {
@étendre .ball;
gauche : 0 ;
arrière-plan : RVB (244, 7, 7) ;
}
.balle2 {
@étendre .ball;
animation-delay : 0,25s ; // Délai d'animation gauche : 30px ;
arrière-plan : RVB (16, 106, 241) ;
}
.balle3 {
@étendre .ball;
animation-delay : 0,5 s ; // délai d'animation restant : 60 px ;
arrière-plan : RVB (251, 236, 13) ;
}
.balle4 {
@étendre .ball;
animation-delay : 0,75s ; // Délai d'animation gauche : 90px ;
arrière-plan : RVB (233, 23, 233) ;
}
.balle5 {
@étendre .ball;
animation-delay : 1.0s ; // Délai d'animation gauche : 120px ;
arrière-plan : RVB (6, 247, 6) ;
}
//Animation d'images clés @keyframes rebondissant {
0% {
top: 0px; //Initialement en haut}
50% {
haut : 100 px ; // milieu en bas}
100 % {
top: 0px; // Enfin, retour en haut}
}Démo
Analyse : surveillance des événements de liaison, l'animation d'appui long sur le bouton est affichée et l'animation de relâchement du bouton est masquée.
Enfin, il est temps de le mettre en service et de voir l’effet obtenu.
<el-button id="bouncingBallBtn">Saisie vocale</el-button> <bouncing-ball v-if="showBouncing" />
/** data showBouncing : false */
monté() {
let theBouncingBtn = document.getElementById("bouncingBallBtn");
//Terminal mobile theBouncingBtn.addEventListener("touchstart", this.startBouncing, false);
theBouncingBtn.addEventListener("touchend", this.endBouncing, false);
// Côté PC theBouncingBtn.addEventListener("mousedown", this.startBouncing, false);
theBouncingBtn.addEventListener("mouseup", this.endBouncing, false);
}
/** Affichage de l'animation*/
startBouncing (événement) {
event.preventDefault();
this.showBouncing = true;
},
/** Masquage de l'animation*/
endBouncing(événement) {
event.preventDefault();
this.showBouncing = false;
},Ceci conclut cet article sur l'animation CSS3 pour implémenter plusieurs balles rebondissantes (animation de saisie vocale). Pour plus d'informations sur les balles rebondissantes CSS3, veuillez rechercher les articles précédents sur downcodes.com ou continuer à parcourir les articles connexes ci-dessous. com plus à l'avenir !