SVG または JavaScript を使用せずに CSS3 で破線の境界線をアニメーション化するにはどうすればよいですか?-CSSチュートリアル-php.cn

SVG または JavaScript を使用せずに CSS3 で破線の境界線をアニメーション化するにはどうすればよいですか?

DDD

リリース： 2024-11-03 05:58:03

オリジナル

673 人が閲覧しました

How Can I Animate Dashed Borders in CSS3 Without SVG or JavaScript?

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

Tympanus に関する記事からインスピレーションを得て、目を引く破線の境界線アニメーションをWordPress のブログ投稿。ただし、課題は、SVG や JavaScript に依存せずにこの効果を再現することにあります。

CSS のみでこれを実現するには、複数の背景の力を活用できます。 2 つの線形グラデーションを組み合わせ、アニメーションによって位置を調整することで、ダッシュボーダーの錯覚を作成できます。その方法は次のとおりです。

<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>

ログイン後にコピー

このコードは、それぞれ方向が異なる 4 つの線形グラデーションを作成し、background-position プロパティを通じてそれらの位置を交互に切り替えます。トランジションプロパティにより、ユーザーが要素の上にマウスを移動したときにスムーズなアニメーション効果が保証されます。

このアプローチは、SVG や JavaScript を必要とせずに破線の境界線アニメーションを模倣するため、WordPress ブログ投稿に動的な境界線を簡単に追加できます。 .

以上がSVG または JavaScript を使用せずに CSS3 で破線の境界線をアニメーション化するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。