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 サイトの他の関連記事を参照してください。