Bagaimana untuk Membuat Animasi Sempadan CSS3 Tanpa SVG atau JavaScript?

Animasi Sempadan CSS3 tanpa SVG atau JavaScript

Animasi sempadan popular yang dilihat di tympanus.net, selalunya dibuat menggunakan SVG, boleh dicipta semula menggunakan CSS3 tulen. Artikel ini menerangkan langkah-langkah yang terlibat.

Mencipta Animasi

Menggunakan berbilang latar belakang dan menganimasikan kedudukan mereka mencapai kesan ini. Kod bermula dengan HTML berikut:

<code class="html"><div class="border">
  Some text
</div></code>

CSS untuk animasi termasuk empat kecerunan linear untuk mencipta sempadan putus-putus pada semua sisi:

<code class="css">.border {
  background: linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(90deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%), linear-gradient(0deg, blue 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 16px 4px, 16px 4px, 4px 16px, 4px 16px;
  background-position: 0px 0px, 212px 116px, 0px 116px, 216px 0px;
  padding: 10px;
  transition: background-position 2s;
}</code>

Ini menetapkan latar belakang dengan empatnya sempadan putus-putus.

Pada tuding, kedudukan latar belakang diubah suai untuk mencipta kesan animasi:

<code class="css">.border:hover {
  background-position: 212px 0px, 0px 116px, 0px 0px, 216px 116px;
}</code>

Pelaksanaan

Untuk menambah animasi ini pada setiap div catatan blog, cuma tambahkan kelas "sempadan" pada div dalam templat WordPress anda.

Teknik ini menyediakan penyelesaian mudah dan CSS sahaja untuk menambah animasi sempadan yang diingini pada catatan blog WordPress anda.

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