沒有 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中文網其他相關文章!