SVG や JavaScript を使用せずに CSS3 ボーダー アニメーションを作成するにはどうすればよいですか?

SVG または JavaScript を使用しない CSS3 境界線アニメーション

tympanus.net でよく見られる人気のある境界線アニメーションは、SVG を使用して作成されることが多く、純粋な CSS3 を使用して再作成できます。この記事では、関連する手順について説明します。

アニメーションの作成

複数の背景を使用し、その位置をアニメーション化すると、この効果が得られます。コードは次の HTML で始まります:

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

アニメーションの CSS には、四方に破線の境界線を作成する 4 つの線形グラデーションが含まれています:

<code class="css">.border {
  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;
}</code>

これにより、その 4 つの背景が確立されます。

ホバーすると、背景の位置が変更されてアニメーションが作成されます。効果:

<code class="css">.border:hover {
  background-position: 212px 0px, 0px 116px, 0px 0px, 216px 116px;
}</code>

実装

このアニメーションを各ブログ投稿 div に追加するには、WordPress テンプレートの div に「border」クラスを追加するだけです。

このテクニックは、WordPress ブログに目的の境界線アニメーションを追加するためのシンプルで CSS のみのソリューションを提供します。投稿。

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