Während meines vorherigen Praktikums hatte ich die Anforderung, eine H5-Seite auf der Android-Seite einzubetten, um die Spracheingabe zu realisieren und während der Eingabe Animationen und springende Bälle einzubinden. Durch die Konsultation verschiedener Materialien und basierend auf tatsächlichen Bedarfsszenarien wurde seine Funktion schließlich erkannt. Lassen Sie es uns hier überprüfen und aufzeichnen.
Stellen Sie sich zunächst das Schlagen eines einzelnen Balls vor.
Analyse: Der Ball beginnt oben, erreicht in der Mitte den Boden und kehrt schließlich nach oben zurück. Es handelt sich um eine Endlosschleife. Erreicht durch die Kombination relativer Positionierung mit CSS3-Keyframes.
<div class="ball"></div>
.ball {
Breite: 20px;
Höhe: 20px;
Randradius: 50 %;
Position: relativ;
Animationsname: Bounce; // Animationsname Animationsdauer: 1,6 s; // Animations-Endlosschleifenhintergrund: rgb(244, 7, 7); Farbe}
//Keyframe-Animation @keyframes hüpfend {
0 % {
top: 0px; //Anfänglich oben}
50 % {
oben: 100px; // Mitte unten}
100 % {
top: 0px; // Endlich zurück nach oben}
}Analyse: Mehrere kleine Bälle schlagen gleichzeitig und die relative Positionierung muss unterschiedlich sein. Zweitens gibt es einen Zeitunterschied in der Animation jedes kleinen Balls. Der zweite ist die Farbe des kleinen Balls.
/** Bälle = [1,2,3,4,5] mehrere Bälle*/
<div v-for="Ball in Bällen" :key="ball" :class="['ball', `ball${ball}`]"></div> //Extraction im öffentlichen Stil.ball {
Breite: 20px;
Höhe: 20px;
Randradius: 50 %;
Position: relativ;
Animationsname: Bounce; // Animationsname Animationsdauer: 1,6 s; // Einzelanimationsdauer Animations-Iterationszahl: unendlich;
.ball1 {
@extend .ball;
links: 0;
Hintergrund: rgb(244, 7, 7);
}
.ball2 {
@extend .ball;
Animationsverzögerung: 0,25 s; // Animationsverzögerung links: 30 Pixel;
Hintergrund: rgb(16, 106, 241);
}
.ball3 {
@extend .ball;
Animationsverzögerung: 0,5 s; // Animationsverzögerung links: 60 Pixel;
Hintergrund: rgb(251, 236, 13);
}
.ball4 {
@extend .ball;
Animationsverzögerung: 0,75 s; // Animationsverzögerung links: 90 Pixel;
Hintergrund: rgb(233, 23, 233);
}
.ball5 {
@extend .ball;
Animationsverzögerung: 1,0 s; // Animationsverzögerung links: 120 Pixel;
Hintergrund: rgb(6, 247, 6);
}
//Keyframe-Animation @keyframes hüpfend {
0 % {
top: 0px; //Anfänglich oben}
50 % {
oben: 100px; // Mitte unten}
100 % {
top: 0px; // Endlich zurück nach oben}
}Demo
Analyse: Bindungsereignisüberwachung, die Animation zum langen Drücken der Taste wird angezeigt und die Animation zum Loslassen der Taste wird ausgeblendet.
Schließlich ist es an der Zeit, es in Gebrauch zu nehmen und die erzielte Wirkung zu sehen.
<el-button id="bcreasingBallBtn">Spracheingabe</el-button> <bounce-ball v-if="showBounce" />
/** data showBounce: false */
mount() {
let theBounceBtn = document.getElementById("bcreasingBallBtn");
//Mobiles Endgerät theBounceBtn.addEventListener("touchstart", this.startBounce, false);
theBounceBtn.addEventListener("touchend", this.endBounce, false);
// PC-Seite theBounceBtn.addEventListener("mousedown", this.startBounce, false);
theBounceBtn.addEventListener("mouseup", this.endBounce, false);
}
/** Animationsanzeige*/
startBounce(event) {
event.preventDefault();
this.showBounce = true;
},
/** Animation wird ausgeblendet*/
endBounce(event) {
event.preventDefault();
this.showBounce = false;
},Damit ist dieser Artikel über die CSS3-Animation zum Implementieren mehrerer springender Bälle (Spracheingabeanimation) abgeschlossen. Weitere Informationen zu CSS3-springenden Bällen finden Sie in den vorherigen Artikeln auf downcodes.com. Ich hoffe, Sie unterstützen Downcodes. com in Zukunft mehr!