ホームページ > 記事 > ウェブフロントエンド > SVG を使用せずに CSS3 境界線アニメーションを作成するにはどうすればよいですか?
SVG を使用しない CSS3 境界線アニメーション
参照された記事では、SVG で作成された目を引く破線の境界線アニメーションを示しています。このアニメーションは視覚的に魅力的ですが、SVG の性質上、すべてのアプリケーションに適しているとは限りません。この記事では、JavaScript や SVG を必要とせず、CSS3 のみを使用して同様の効果を実現する代替アプローチを検討します。
このアプローチを説明するために、次のコードの抜粋を考えてみましょう。
<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 ルールは時間の経過に伴う一連の状態を定義し、アニメーション プロパティはアニメーションのパラメーターを指定します。このアニメーションは、破線の境界線が動的に拡大および縮小する、より視覚的に魅力的な効果を生み出します。
以上がSVG を使用せずに CSS3 境界線アニメーションを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。