如何在沒有 SVG 的情況下建立 CSS3 邊框動畫？-css教學-PHP中文網

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

Mary-Kate Olsen

發布： 2024-11-01 17:04:30

原創

869 人瀏覽過

How to Create CSS3 Border Animations Without SVG?

沒有 SVG 的 CSS3 邊框動畫

引用的文章演示了使用 SVG 創建的引人注目的虛線邊框動畫。雖然此動畫在視覺上很有吸引力，但由於其 SVG 性質，它可能不適合所有應用程式。本文探討了一種僅使用 CSS3 即可實現類似效果的替代方法，而不需要 JavaScript 或 SVG。

為了說明此方法，讓我們考慮以下程式碼摘錄：

<code class="css">.go {
  width: 900px;
  height: 200px;
  border: 8px dashed;
}

.go:hover {
  border-width: 12px;
}</code>

登入後複製

<code class="html"><div class="go">
  This is a div with dashed border animation.
</div></code>

登入後複製

在這個例子中，我們定義了一個帶有虛線邊框的類別.go。當滑鼠懸停在 div 上時，我們動態增加邊框寬度，創造視覺上擴展的效果。這個基本動畫可以使用額外的 CSS 技術來增強。

<code class="css">.go {
  width: 900px;
  height: 200px;
  border: 8px dashed black;
  animation: dash 2s infinite;
}

@keyframes dash {
  0% {
    border-width: 0px;
  }
  100% {
    border-width: 16px;
  }
}</code>

登入後複製

在這裡，我們引入 CSS 動畫來創造連續的衝刺效果。 @keyframes 規則定義了一系列隨時間變化的狀態，animation 屬性指定動畫的參數。此動畫產生更具視覺吸引力的效果，其中虛線邊框會動態擴展和收縮。

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