如何在沒有 SVG 或 JavaScript 的情況下建立 CSS3 邊框動畫？

不需要 SVG 或 JavaScript 的 CSS3 邊框動畫

tympanus.net 上常見的邊框動畫通常使用 SVG 創建，可以使用純 CSS3 重新建立。本文介紹了所涉及的步驟。

建立動畫

使用多個背景並對其位置進行動畫處理可以實現此效果。程式碼以以下HTML 開頭：

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

動畫的CSS 包括四個線性漸變，用於在所有邊上建立虛線邊框：

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

這將建立具有四個線性漸層的背景：虛線邊框。

懸停時，背景位置會被修改以創建動畫效果：

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

實現

將此動畫加入每個部落格文章div，只需將「border」類別新增至WordPress 範本中的div 即可。

此技術提供了一個簡單且僅 CSS 的解決方案，用於將所需的邊框動畫添加到您的 WordPress 部落格文章中。

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