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

CSS3 の SVG を使用しない破線の境界線アニメーション

提起された質問は、提供された記事で示されているアニメーション化された破線の境界線効果を、利用せずに実装する方法です。 WordPress ブログの投稿 div 内の SVG または JavaScript。

非 SVG 破線境界線アニメーションを実現するための解決策:

幸いなことに、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>

このコード内:

• 複数線形グラデーションは、破線の境界線効果を作成するために使用されます。
• background-position プロパティは、ホバー時にアニメーション化され、グラデーションの位置をシフトし、動きを作成します。
• ホバー状態によりアニメーションがトリガーされ、動きのある破線の境界線の印象。

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