Bagaimana untuk Mencipta Animasi Sempadan CSS3 Tanpa SVG?

Animasi Sempadan CSS3 Tanpa SVG

Artikel yang dirujuk menunjukkan animasi sempadan putus-putus yang menarik perhatian dibuat dengan SVG. Walaupun animasi ini boleh menarik secara visual, ia mungkin tidak sesuai untuk semua aplikasi kerana sifat SVGnya. Artikel ini meneroka pendekatan alternatif untuk mencapai kesan serupa hanya menggunakan CSS3, tanpa memerlukan JavaScript atau SVG.

Untuk menggambarkan pendekatan ini, mari pertimbangkan petikan kod berikut:

<code class="css">.go {
  width: 900px;
  height: 200px;
  border: 8px dashed;
}

.go:hover {
  border-width: 12px;
}</code>

<code class="html"><div class="go">
  This is a div with dashed border animation.
</div></code>

Dalam contoh ini, kami mentakrifkan kelas .go dengan sempadan putus-putus. Apabila tetikus melayang di atas div, kami meningkatkan lebar sempadan secara dinamik, mewujudkan kesan pengembangan visual. Animasi asas ini boleh dipertingkatkan menggunakan teknik CSS tambahan.

<code class="css">.go {
  width: 900px;
  height: 200px;
  border: 8px dashed black;
  animation: dash 2s infinite;
}

@keyframes dash {
  0% {
    border-width: 0px;
  }
  100% {
    border-width: 16px;
  }
}</code>

Di sini, kami memperkenalkan animasi CSS untuk mencipta kesan kacak berterusan. Peraturan @keyframes mentakrifkan satu siri keadaan dari semasa ke semasa dan sifat animasi menentukan parameter animasi. Animasi ini menghasilkan kesan yang lebih menarik secara visual apabila sempadan putus-putus mengembang dan mengecut secara dinamik.

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Animasi Sempadan CSS3 Tanpa SVG?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!