SVG を使用せずに CSS を使用してアニメーションの破線境界線を作成する方法

CSS3 を使用した破線のアニメーション化

魅力的な記事に触発されて、WordPress ブログ投稿にアニメーション化された破線の境界線を組み込みたいと考えています。ただし、元の設計では SVG を使用しているため、障害が発生します。ここでは、SVG や JavaScript に頼らずに目的の効果を実現できるソリューションを紹介します。

複数の背景を利用し、CSS を通じてその位置をアニメーション化することで、ダッシュ効果を作成することができます。これを実現するコードは次のとおりです。

<code class="css">.border {
  height: 100px;
  width: 200px;
  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;
}
.border:hover {
    background-position: 212px 0px, 0px 116px, 0px 0px, 216px 116px;
}</code>

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

このコードを実装すると、ブログ投稿 div にカーソルを置くと、アニメーション化された破線の境界線が表示されます。この手法は、SVG アニメーションに代わる軽量でカスタマイズ可能な代替手段を提供します。

以上がSVG を使用せずに CSS を使用してアニメーションの破線境界線を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。