CSS3動(dòng)畫實(shí)現(xiàn)多個(gè)跳動(dòng)小球效果(語音輸入動(dòng)畫)
發(fā)布時(shí)間：2024-08-29 16:11:42 作者：Cxiaomu 
我要評(píng)論
我要評(píng)論之前有做過一個(gè)需求，安卓端嵌H5頁面，實(shí)現(xiàn)語音輸入并包含輸入時(shí)動(dòng)畫，跳動(dòng)的小球，多個(gè)小球同時(shí)跳動(dòng)，相對(duì)定位需要left不相同，其次每個(gè)小球動(dòng)畫開始有時(shí)間差，其次就是小球顏色了，接下來通過本文給大家分享實(shí)例代碼，感興趣的朋友跟隨小編一起看看吧
VUE使用CSS3動(dòng)畫實(shí)現(xiàn)多個(gè)跳動(dòng)小球（語音輸入動(dòng)畫）
之前實(shí)習(xí)期間，有做過一個(gè)需求，安卓端嵌H5頁面，實(shí)現(xiàn)語音輸入并包含輸入時(shí)動(dòng)畫，跳動(dòng)的小球。通過查閱各種資料，根據(jù)實(shí)際需求場景，最終實(shí)現(xiàn)了其功能。在此便回顧記錄一下吧。
單個(gè)小球無限跳動(dòng)
首先，實(shí)現(xiàn)單個(gè)小球跳動(dòng)。
分析： 小球起始位置在頂部，中間時(shí)間段到底部，最后又回到頂部，并且是無限循環(huán)的。通過相對(duì)定位與CSS3的關(guān)鍵幀結(jié)合實(shí)現(xiàn)。
<div class="ball"></div>
.ball {
width: 20px;
height: 20px;
border-radius: 50%;
position: relative;
animation-name: bouncing; // 動(dòng)畫名稱
animation-duration: 1.6s; // 單次動(dòng)畫持續(xù)時(shí)長
animation-iteration-count: infinite; // 動(dòng)畫無限循環(huán)
background: rgb(244, 7, 7); // 小球背景色
}
// 關(guān)鍵幀動(dòng)畫
@keyframes bouncing {
0% {
top: 0px; // 初始位于頂部
}
50% {
top: 100px; // 中間位于底部
}
100% {
top: 0px; // 最終回到頂部
}
}多個(gè)小球跳動(dòng)
分析： 多個(gè)小球同時(shí)跳動(dòng)，相對(duì)定位需要left不相同，其次每個(gè)小球動(dòng)畫開始有時(shí)間差，其次就是小球顏色了。
/** balls = [1,2,3,4,5] 多個(gè)小球 */
<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; // 動(dòng)畫名稱
animation-duration: 1.6s; // 單次動(dòng)畫持續(xù)時(shí)長
animation-iteration-count: infinite; // 動(dòng)畫無限循環(huán)
}
.ball1 {
@extend .ball;
left: 0;
background: rgb(244, 7, 7);
}
.ball2 {
@extend .ball;
animation-delay: 0.25s; // 動(dòng)畫延遲
left: 30px;
background: rgb(16, 106, 241);
}
.ball3 {
@extend .ball;
animation-delay: 0.5s; // 動(dòng)畫延遲
left: 60px;
background: rgb(251, 236, 13);
}
.ball4 {
@extend .ball;
animation-delay: 0.75s; // 動(dòng)畫延遲
left: 90px;
background: rgb(233, 23, 233);
}
.ball5 {
@extend .ball;
animation-delay: 1.0s; // 動(dòng)畫延遲
left: 120px;
background: rgb(6, 247, 6);
}
// 關(guān)鍵幀動(dòng)畫
@keyframes bouncing {
0% {
top: 0px; // 初始位于頂部
}
50% {
top: 100px; // 中間位于底部
}
100% {
top: 0px; // 最終回到頂部
}
}Demo
分析： 綁定事件監(jiān)聽，按鈕長按動(dòng)畫顯示，按鈕松開動(dòng)畫隱藏。
最后，就是投入使用，看一下實(shí)現(xiàn)的效果了。
<el-button id="bouncingBallBtn">語音錄入</el-button> <bouncing-ball v-if="showBouncing" />
/** data showBouncing: false */
mounted() {
let theBouncingBtn = document.getElementById("bouncingBallBtn");
// 移動(dòng)端
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);
}
/** 動(dòng)畫顯示 */
startBouncing(event) {
event.preventDefault();
this.showBouncing = true;
},
/** 動(dòng)畫隱藏 */
endBouncing(event) {
event.preventDefault();
this.showBouncing = false;
},到此這篇關(guān)于CSS3動(dòng)畫實(shí)現(xiàn)多個(gè)跳動(dòng)小球（語音輸入動(dòng)畫）的文章就介紹到這了,更多相關(guān)CSS3跳動(dòng)小球內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS3 實(shí)現(xiàn)彈跳的小球動(dòng)畫
這篇文章主要介紹了CSS3 實(shí)現(xiàn)彈跳的小球動(dòng)畫，幫助大家更好的制作CSS3特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下2020-10-26