Tutorial Animasi CSS: Ajar anda langkah demi langkah untuk melaksanakan kesan khas bola kilat

Tutorial Animasi CSS: Ajar anda langkah demi langkah untuk melaksanakan kesan khas bola kilat

Dalam reka bentuk web, kesan animasi boleh menambah perasaan yang jelas pada halaman dan menarik perhatian pengguna. Animasi CSS ialah salah satu cara yang mudah dan berkesan untuk mencapai kesan ini. Artikel ini akan memperkenalkan cara mencipta kesan bola kilat melalui CSS untuk menjadikan halaman anda lebih menarik dan dinamik.

Pertama, kita perlu menyediakan beberapa struktur HTML asas. Berikut ialah contoh mudah:

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

Struktur ini akan mengandungi elemen bekas dan elemen sfera. Seterusnya, kita perlu menambah gaya pada elemen ini.

Mula-mula, kami menambah beberapa gaya pada elemen bekas:

.container {
   width: 500px;
   height: 500px;
   position: relative;
   background-color: #000;
   overflow: hidden;
}

Di sini, kami menetapkan bekas itu ke kawasan persegi dengan lebar dan ketinggian 500px, menggunakan kedudukan relatif dan menetapkan warna latar belakangnya kepada hitam. Selain itu, kami juga akan menetapkan sifat limpahannya kepada tersembunyi untuk memastikan elemen sfera tidak kelihatan apabila ia melebihi skop bekas.

Seterusnya, kami menambah gaya pada elemen sfera:

.ball {
   width: 100px;
   height: 100px;
   border-radius: 50%;
   position: absolute;
   background-color: #f00;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   animation: lightning 2s infinite;
}

Di sini, kami menetapkan elemen sfera kepada bulatan dengan lebar dan ketinggian 100px dan menggunakan kedudukan relatif kepada bekas. Kami kemudian menetapkan warna latar belakangnya kepada merah dan kedudukannya berada di tengah mendatar dan menegak bekas. Gunakan atribut transform dan fungsi terjemah untuk memusatkan elemen pada dirinya sendiri. transform属性和translate函数来将元素在其自身的中心定位。

此外，我们还为球形元素添加了一个名为lightning的动画。这个动画将会在2秒内无限循环播放。下面是动画的具体定义：

@keyframes lightning {
   0% {
      box-shadow: 0 0 5px 5px #fff, 0 0 10px 10px #fff;
   }
   50% {
      box-shadow: 0 0 20px 20px #fff, 0 0 30px 30px #fff;
   }
   100% {
      box-shadow: 0 0 5px 5px #fff, 0 0 10px 10px #fff;
   }
}

在这里，我们使用了@keyframes

rrreee

Atas ialah kandungan terperinci Tutorial Animasi CSS: Ajar anda langkah demi langkah untuk melaksanakan kesan khas bola kilat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!