如何在沒有 SVG 或 JavaScript 的情況下在 CSS3 中製作虛線邊框動畫？

使用CSS3 動畫製作虛線邊框

受到有關Tympanus 的文章的啟發，您的目標是將引人注目的虛線邊框動畫合併到您的WordPress 部落格文章。然而，挑戰在於如何在不依賴 SVG 或 JavaScript 的情況下複製這種效果。

要只使用 CSS 來實現此效果，您可以利用多個背景的強大功能。透過組合兩個線性漸變並透過動畫調整它們的位置，您可以創建虛線邊框的錯覺。操作方法如下：

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

此程式碼建立四個線性漸變，每個漸變都有不同的方向，然後透過 background-position 屬性交替它們的位置。過渡屬性可確保使用者將滑鼠懸停在元素上時實現平滑的動畫效果。

這個方法模仿虛線邊框動畫，無需 SVG 或 JavaScript，讓您輕鬆為 WordPress 部落格文章添加動態邊框.

以上是如何在沒有 SVG 或 JavaScript 的情況下在 CSS3 中製作虛線邊框動畫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！