欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS3動(dòng)畫(huà)實(shí)現(xiàn)多個(gè)跳動(dòng)小球效果(語(yǔ)音輸入動(dòng)畫(huà))

  發(fā)布時(shí)間：2024-08-29 16:11:42   作者：Cxiaomu   我要評(píng)論
之前有做過(guò)一個(gè)需求，安卓端嵌H5頁(yè)面，實(shí)現(xiàn)語(yǔ)音輸入并包含輸入時(shí)動(dòng)畫(huà)，跳動(dòng)的小球，多個(gè)小球同時(shí)跳動(dòng)，相對(duì)定位需要left不相同，其次每個(gè)小球動(dòng)畫(huà)開(kāi)始有時(shí)間差，其次就是小球顏色了，接下來(lái)通過(guò)本文給大家分享實(shí)例代碼，感興趣的朋友跟隨小編一起看看吧

VUE使用CSS3動(dòng)畫(huà)實(shí)現(xiàn)多個(gè)跳動(dòng)小球（語(yǔ)音輸入動(dòng)畫(huà)）

之前實(shí)習(xí)期間，有做過(guò)一個(gè)需求，安卓端嵌H5頁(yè)面，實(shí)現(xiàn)語(yǔ)音輸入并包含輸入時(shí)動(dòng)畫(huà)，跳動(dòng)的小球。通過(guò)查閱各種資料，根據(jù)實(shí)際需求場(chǎng)景，最終實(shí)現(xiàn)了其功能。在此便回顧記錄一下吧。

單個(gè)小球無(wú)限跳動(dòng)

首先，實(shí)現(xiàn)單個(gè)小球跳動(dòng)。
分析： 小球起始位置在頂部，中間時(shí)間段到底部，最后又回到頂部，并且是無(wú)限循環(huán)的。通過(guò)相對(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)畫(huà)名稱
  animation-duration: 1.6s; // 單次動(dòng)畫(huà)持續(xù)時(shí)長(zhǎng)
  animation-iteration-count: infinite; // 動(dòng)畫(huà)無(wú)限循環(huán)
  background: rgb(244, 7, 7);  // 小球背景色
}
// 關(guān)鍵幀動(dòng)畫(huà)
@keyframes bouncing {
  0% {
    top: 0px; // 初始位于頂部
  }
  50% {
    top: 100px; // 中間位于底部
  }
  100% {
    top: 0px; // 最終回到頂部
  }
}

多個(gè)小球跳動(dòng)

分析： 多個(gè)小球同時(shí)跳動(dòng)，相對(duì)定位需要left不相同，其次每個(gè)小球動(dòng)畫(huà)開(kāi)始有時(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)畫(huà)名稱
  animation-duration: 1.6s; // 單次動(dòng)畫(huà)持續(xù)時(shí)長(zhǎng)
  animation-iteration-count: infinite; // 動(dòng)畫(huà)無(wú)限循環(huán)
}
.ball1 {
  @extend .ball;
  left: 0;
  background: rgb(244, 7, 7);
}
.ball2 {
  @extend .ball;
  animation-delay: 0.25s; // 動(dòng)畫(huà)延遲
  left: 30px;
  background: rgb(16, 106, 241);
}
.ball3 {
  @extend .ball;
  animation-delay: 0.5s; // 動(dòng)畫(huà)延遲
  left: 60px;
  background: rgb(251, 236, 13); 
}
.ball4 {
  @extend .ball;
  animation-delay: 0.75s; // 動(dòng)畫(huà)延遲
  left: 90px;
  background: rgb(233, 23, 233); 
}
.ball5 {
  @extend .ball;
  animation-delay: 1.0s; // 動(dòng)畫(huà)延遲
  left: 120px;
  background: rgb(6, 247, 6); 
}
// 關(guān)鍵幀動(dòng)畫(huà)
@keyframes bouncing {
 0% {
    top: 0px; // 初始位于頂部
  }
  50% {
    top: 100px; // 中間位于底部
  }
  100% {
    top: 0px; // 最終回到頂部
  }
}

Demo

分析： 綁定事件監(jiān)聽(tīng)，按鈕長(zhǎng)按動(dòng)畫(huà)顯示，按鈕松開(kāi)動(dòng)畫(huà)隱藏。
最后，就是投入使用，看一下實(shí)現(xiàn)的效果了。

<el-button id="bouncingBallBtn">語(yǔ)音錄入</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)畫(huà)顯示 */
 startBouncing(event) {
   event.preventDefault();
   this.showBouncing = true;
 },
 /** 動(dòng)畫(huà)隱藏 */
 endBouncing(event) {
   event.preventDefault();
   this.showBouncing = false;
 },

到此這篇關(guān)于CSS3動(dòng)畫(huà)實(shí)現(xiàn)多個(gè)跳動(dòng)小球（語(yǔ)音輸入動(dòng)畫(huà)）的文章就介紹到這了,更多相關(guān)CSS3跳動(dòng)小球內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論