Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Membuat Animasi Sempadan CSS3 Tanpa SVG atau JavaScript?

Bagaimana untuk Membuat Animasi Sempadan CSS3 Tanpa SVG atau JavaScript?

Barbara Streisand
Barbara Streisandasal
2024-11-02 18:54:311078semak imbas

How to Create CSS3 Border Animations Without SVG or 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn