Bagaimanakah Saya Boleh Menghidupkan Sempadan Bergaris dalam CSS3 Tanpa SVG atau JavaScript?

Menghidupkan Sempadan Berputus-putus Menggunakan Animasi CSS3

Diinspirasikan oleh artikel tentang Tympanus, anda berhasrat untuk memasukkan animasi sempadan putus-putus yang menarik perhatian ke dalam anda Catatan blog WordPress. Walau bagaimanapun, cabarannya terletak pada mereplikasi kesan ini tanpa bergantung pada SVG atau JavaScript.

Untuk mencapai ini dengan CSS sahaja, anda boleh memanfaatkan kuasa berbilang latar belakang. Dengan menggabungkan dua kecerunan linear dan melaraskan kedudukannya melalui animasi, anda boleh mencipta ilusi sempadan yang gagah. Begini caranya:

<code class="css">.border {
  height: 100px;
  width: 200px;
  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;
}

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

Kod ini mencipta empat kecerunan linear, setiap satu dengan arah yang berbeza, dan kemudian menukar kedudukannya melalui sifat kedudukan latar belakang. Sifat peralihan memastikan kesan animasi yang lancar apabila pengguna menuding pada elemen.

Pendekatan ini meniru animasi sempadan putus-putus tanpa memerlukan SVG atau JavaScript, membolehkan anda menambah sempadan dinamik pada catatan blog WordPress anda dengan mudah .

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menghidupkan Sempadan Bergaris dalam CSS3 Tanpa SVG atau JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!