Bagaimana untuk Mencipta Sempadan Bergerak Animasi dalam CSS Tanpa Menggunakan SVG atau JavaScript?

Animasi Sempadan Putus-putus tanpa SVG dalam CSS3

Persoalan yang ditimbulkan ialah bagaimana untuk melaksanakan kesan sempadan putus-putus animasi yang ditunjukkan dalam artikel yang dibekalkan tanpa menggunakan SVG atau JavaScript dalam bahagian catatan blog WordPress.

Penyelesaian untuk Mencapai Animasi Sempadan Tidak Berputus-putus SVG:

Mujurlah, kesan ini boleh dicapai semata-mata dengan CSS , memanfaatkan berbilang latar belakang dan menghidupkan kedudukannya.

Berikut ialah coretan kod yang mempamerkan pelaksanaan:

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

Dalam kod ini:

• Berbilang kecerunan linear digunakan untuk mencipta kesan sempadan putus-putus.
• Sifat kedudukan latar belakang dianimasikan pada tuding untuk mengalihkan kedudukan kecerunan dan mencipta pergerakan.
• Keadaan tuding mencetuskan animasi, memberikan kesan sempadan putus-putus dengan kesan bergerak.

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