ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。