تدرك الرسوم المتحركة CSS3 تأثير كرات القفز المتعددة (الرسوم المتحركة للإدخال الصوتي)

 <div class="ball"></div>

 .كرة {
  العرض: 20 بكسل؛
  الارتفاع: 20 بكسل؛
  نصف قطر الحدود: 50%؛
  الموقف: نسبي؛
  اسم الرسوم المتحركة: كذاب؛ // اسم الرسوم المتحركة مدة الرسوم المتحركة: 1.6 ثانية؛ // عدد تكرار الرسوم المتحركة: لا نهائي؛ // خلفية حلقة الرسوم المتحركة: rgb(244, 7, 7); لون}
// الرسوم المتحركة للإطار الرئيسي @keyframes bouncing {
  0% {
    أعلى: 0px؛ // في البداية في الأعلى}
  50% {
    أعلى: 100 بكسل؛ // المنتصف في الأسفل}
  100% {
    أعلى: 0px؛ // أخيرًا العودة إلى الأعلى}
}

 /** الكرات = [1,2,3,4,5] كرات متعددة*/
<div v-for="ball in balls" :key="ball" :class="['ball', `ball${ball}`]"></div>

 // استخراج النمط العام. الكرة {
  العرض: 20 بكسل؛
  الارتفاع: 20 بكسل؛
  نصف قطر الحدود: 50%؛
  الموقف: نسبي؛
  اسم الرسوم المتحركة: كذاب؛ // مدة الرسوم المتحركة لمدة الرسوم المتحركة: 1.6 ثانية؛
.كرة 1 {
  @تمديد .ball;
  اليسار: 0؛
  الخلفية: rgb(244, 7, 7);
}
.ball2 {
  @تمديد .ball;
  تأخير الرسوم المتحركة: 0.25 ثانية؛ // تأخير الرسوم المتحركة اليسار: 30 بكسل؛
  الخلفية: رغب (16، 106، 241)؛
}
.ball3 {
  @تمديد .ball;
  تأخير الرسوم المتحركة: 0.5 ثانية؛ // تأخير الرسوم المتحركة اليسار: 60 بكسل؛
  الخلفية: رغب (251، 236، 13)؛ 
}
.ball4 {
  @تمديد .ball;
  تأخير الرسوم المتحركة: 0.75 ثانية؛ // تأخير الرسوم المتحركة اليسار: 90 بكسل؛
  الخلفية: رغب (233، 23، 233)؛ 
}
.ball5 {
  @تمديد .ball;
  تأخير الرسوم المتحركة: 1.0 ثانية؛ // تأخير الرسوم المتحركة اليسار: 120 بكسل؛
  الخلفية: rgb(6, 247, 6); 
}
// الرسوم المتحركة للإطار الرئيسي @keyframes bouncing {
 0% {
    أعلى: 0px؛ // في البداية في الأعلى}
  50% {
    أعلى: 100 بكسل؛ // المنتصف في الأسفل}
  100% {
    أعلى: 0px؛ // أخيرًا العودة إلى الأعلى}
}

 <el-button id="bouncingBallBtn">الإدخال الصوتي</el-button>
 <bouncing-ball v-if="showBouncing" />

 /** عرض البيانات: خطأ */
شنت () {
	Let theBouncingBtn = document.getElementById("bouncingBallBtn");
	// محطة متنقلة theBouncingBtn.addEventListener("touchstart", this.startBouncing, false);
	theBouncingBtn.addEventListener("touchend", this.endBouncing, false);
	// جانب الكمبيوتر الشخصي theBouncingBtn.addEventListener("mousedown", this.startBouncing, false);
	theBouncingBtn.addEventListener("mouseup", this.endBouncing, false);
}
  /** عرض الرسوم المتحركة*/
 بداية الارتداد (الحدث) {
   Event.preventDefault();
   this.showBouncing = true;
 },
 /** إخفاء الرسوم المتحركة*/
 نهاية الارتداد (الحدث) {
   Event.preventDefault();
   this.showBouncing = false;
 },