之前實習期間，有做過一個需求，安卓端嵌H5頁面，實現語音輸入並包含輸入時動畫，跳動的小球。透過查閱各種資料，根據實際需求場景，最終實現了其功能。在此便回顧記錄一下吧。
首先，實現單一小球跳動。
分析： 小球起始位置在頂部，中間時間段到底部，最後又回到頂部，並且是無限循環的。透過相對定位與CSS3的關鍵影格結合實現。
<div class="ball"></div>
.ball {
width: 20px;
height: 20px;
border-radius: 50%;
position: relative;
animation-name: bouncing; // 動畫名稱animation-duration: 1.6s; // 單次動畫持續時長animation-iteration-count: infinite; // 動畫無限迴圈background: rgb(244, 7, 7); //小球背景色}
// 關鍵影格動畫@keyframes bouncing {
0% {
top: 0px; // 初始位於頂部}
50% {
top: 100px; // 中間位於底部}
100% {
top: 0px; // 最終回到頂部}
}分析： 多個小球同時跳動，相對定位需要left不相同，其次每個小球動畫開始有時間差，其次就是小球顏色了。
/** balls = [1,2,3,4,5] 多個小球*/
<div v-for="ball in balls" :key="ball" :class="['ball', `ball${ball}`]"></div> // 公共樣式抽離.ball {
width: 20px;
height: 20px;
border-radius: 50%;
position: relative;
animation-name: bouncing; // 動畫名稱animation-duration: 1.6s; // 單次動畫持續時長animation-iteration-count: infinite; // 動畫無限循環}
.ball1 {
@extend .ball;
left: 0;
background: rgb(244, 7, 7);
}
.ball2 {
@extend .ball;
animation-delay: 0.25s; // 動畫延遲left: 30px;
background: rgb(16, 106, 241);
}
.ball3 {
@extend .ball;
animation-delay: 0.5s; // 動畫延遲left: 60px;
background: rgb(251, 236, 13);
}
.ball4 {
@extend .ball;
animation-delay: 0.75s; // 動畫延遲left: 90px;
background: rgb(233, 23, 233);
}
.ball5 {
@extend .ball;
animation-delay: 1.0s; // 動畫延遲left: 120px;
background: rgb(6, 247, 6);
}
// 關鍵影格動畫@keyframes bouncing {
0% {
top: 0px; // 初始位於頂部}
50% {
top: 100px; // 中間位於底部}
100% {
top: 0px; // 最終回到頂部}
}Demo
分析： 綁定事件監聽，按鈕長按動畫顯示，按鈕放開動畫隱藏。
最後，就是投入使用，看一下實現的效果了。
<el-button id="bouncingBallBtn">語音錄入</el-button> <bouncing-ball v-if="showBouncing" />
/** data showBouncing: false */
mounted() {
let theBouncingBtn = document.getElementById("bouncingBallBtn");
// 行動端 theBouncingBtn.addEventListener("touchstart", this.startBouncing, false);
theBouncingBtn.addEventListener("touchend", this.endBouncing, false);
// pc端 theBouncingBtn.addEventListener("mousedown", this.startBouncing, false);
theBouncingBtn.addEventListener("mouseup", this.endBouncing, false);
}
/** 動畫顯示*/
startBouncing(event) {
event.preventDefault();
this.showBouncing = true;
},
/** 動畫隱藏*/
endBouncing(event) {
event.preventDefault();
this.showBouncing = false;
},到這篇關於CSS3動畫實現多個跳動小球（語音輸入動畫）的文章就介紹到這了,更多相關CSS3跳動小球內容請搜尋downcodes.com以前的文章或繼續瀏覽下面的相關文章，希望大家以後多多支持downcodes.com！