Bagaimana untuk Mencipta Sempadan Putus Animasi dengan CSS Tanpa SVG?

Menghidupkan Sempadan Berputus-putus dengan CSS3

Diinspirasikan oleh artikel yang menarik, anda ingin memasukkan sempadan putus-putus animasi pada catatan blog WordPress anda. Walau bagaimanapun, anda menghadapi sekatan jalan kerana penggunaan SVG dalam reka bentuk asal. Berikut ialah penyelesaian yang membolehkan anda mencapai kesan yang diingini tanpa menggunakan SVG atau JavaScript.

Menggunakan berbilang latar belakang dan menghidupkan kedudukannya melalui CSS, adalah mungkin untuk mencipta kesan yang mengagumkan. Berikut ialah kod untuk mencapainya:

<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>

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

Setelah melaksanakan kod ini, div catatan blog anda akan mempamerkan jidar putus-putus animasi apabila dituding di atas. Teknik ini menawarkan alternatif yang ringan dan boleh disesuaikan kepada animasi SVG.

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