Selama magang saya sebelumnya, saya memiliki persyaratan untuk menyematkan halaman H5 di sisi Android untuk merealisasikan input suara dan menyertakan animasi dan lompatan bola selama input. Dengan berkonsultasi berbagai bahan dan berdasarkan skenario permintaan aktual, fungsinya akhirnya terwujud. Mari kita tinjau dan catat di sini.
Pertama, sadari pemukulan satu bola.
Analisis: Bola dimulai dari atas, mencapai bagian bawah di tengah periode, dan akhirnya kembali ke atas, dan ini merupakan putaran tak terbatas. Dicapai dengan menggabungkan pemosisian relatif dengan bingkai utama CSS3.
<div kelas="bola"></div>
.bola {
lebar: 20 piksel;
tinggi: 20 piksel;
radius perbatasan: 50%;
posisi: relatif;
nama animasi: memantul; // Nama animasi durasi animasi: 1,6 detik; // Durasi animasi tunggal jumlah iterasi animasi: tak terbatas; // Latar belakang loop tak terbatas animasi: rgb(244, 7, 7); warna}
//Animasi keyframe @keyframe memantul {
0% {
atas: 0px; //Awalnya di atas}
50% {
atas: 100px; // tengah di bawah}
100% {
atas: 0px; // Akhirnya kembali ke atas}
}Analisis: Beberapa bola kecil dipukul secara bersamaan, dan posisi relatifnya harus berbeda. Kedua, ada perbedaan waktu dalam animasi setiap bola kecil.
/** bola = [1,2,3,4,5] beberapa bola*/
<div v-for="bola dalam bola" :key="bola" :class="['bola', `bola${bola}`]"></div> //Ekstraksi gaya publik.ball {
lebar: 20 piksel;
tinggi: 20 piksel;
radius perbatasan: 50%;
posisi: relatif;
nama-animasi: memantul; // Nama animasi-durasi animasi: 1,6 detik; // Durasi animasi tunggal jumlah iterasi animasi: tak terbatas // Animasi loop tak terbatas}
.bola1 {
@extend .ball;
kiri: 0;
latar belakang: rgb(244, 7, 7);
}
.bola2 {
@extend .ball;
penundaan animasi: 0,25 detik; // sisa penundaan animasi: 30 piksel;
latar belakang: rgb(16, 106, 241);
}
.bola3 {
@extend .ball;
penundaan animasi: 0,5 detik; // penundaan animasi tersisa: 60 piksel;
latar belakang: rgb(251, 236, 13);
}
.bola4 {
@extend .ball;
penundaan animasi: 0,75 detik; // penundaan animasi tersisa: 90 piksel;
latar belakang: rgb(233, 23, 233);
}
.ball5 {
@extend .ball;
penundaan animasi: 1,0 detik; // penundaan animasi tersisa: 120px;
latar belakang: rgb(6, 247, 6);
}
//Animasi keyframe @keyframe memantul {
0% {
atas: 0px; //Awalnya di atas}
50% {
atas: 100px; // tengah di bawah}
100% {
atas: 0px; // Akhirnya kembali ke atas}
}Demo
Analisis: Pemantauan peristiwa pengikatan, animasi tekan lama tombol ditampilkan, dan animasi pelepasan tombol disembunyikan.
Terakhir, sekarang saatnya untuk menggunakannya dan melihat efek yang dicapai.
<el-button id="bouncingBallBtn">Masukan suara</el-button> <bola memantul v-if="showBouncing" />
/** pertunjukan data Memantul: salah */
dipasang() {
biarkan theBouncingBtn = document.getElementById("bouncingBallBtn");
//Terminal seluler theBouncingBtn.addEventListener("touchstart", this.startBouncing, false);
theBouncingBtn.addEventListener("touchend", this.endBouncing, false);
// Sisi PC theBouncingBtn.addEventListener("mousedown", this.startBouncing, false);
theBouncingBtn.addEventListener("mouseup", this.endBouncing, false);
}
/** Tampilan animasi*/
startBouncing(acara) {
acara.preventDefault();
this.showBouncing = benar;
},
/** Penyembunyian animasi*/
endBouncing(acara) {
acara.preventDefault();
this.showBouncing = salah;
},Demikianlah artikel tentang animasi CSS3 untuk mengimplementasikan beberapa bola memantul (animasi input suara). Untuk informasi lebih lanjut tentang bola memantul CSS3, silakan cari artikel sebelumnya di downcodes.com atau lanjutkan menelusuri artikel terkait di bawah. com lebih banyak lagi di masa depan!