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

CSS3動畫實現(xiàn)多個跳動小球效果(語音輸入動畫)

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

VUE使用CSS3動畫實現(xiàn)多個跳動小球（語音輸入動畫）

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

單個小球無限跳動

首先，實現(xiàn)單個小球跳動。
分析： 小球起始位置在頂部，中間時間段到底部，最后又回到頂部，并且是無限循環(huán)的。通過相對定位與CSS3的關(guān)鍵幀結(jié)合實現(xiàn)。

<div class="ball"></div>
.ball {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: relative;
  animation-name: bouncing; // 動畫名稱
  animation-duration: 1.6s; // 單次動畫持續(xù)時長
  animation-iteration-count: infinite; // 動畫無限循環(huán)
  background: rgb(244, 7, 7);  // 小球背景色
}
// 關(guān)鍵幀動畫
@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; // 單次動畫持續(xù)時長
  animation-iteration-count: infinite; // 動畫無限循環(huán)
}
.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); 
}
// 關(guān)鍵幀動畫
@keyframes bouncing {
 0% {
    top: 0px; // 初始位于頂部
  }
  50% {
    top: 100px; // 中間位于底部
  }
  100% {
    top: 0px; // 最終回到頂部
  }
}

Demo

分析： 綁定事件監(jiān)聽，按鈕長按動畫顯示，按鈕松開動畫隱藏。
最后，就是投入使用，看一下實現(xiàn)的效果了。

<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;
 },

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

相關(guān)文章

  • CSS3 實現(xiàn)彈跳的小球動畫

    這篇文章主要介紹了CSS3 實現(xiàn)彈跳的小球動畫，幫助大家更好的制作CSS3特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下
    2020-10-26

最新評論