CSS3 アニメーションのみを使用して「タグ」の効果を再作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS3 アニメーションのみを使用して「タグ」の効果を再作成するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-11-30 22:20:12

オリジナル

230 人が閲覧しました

How Can I Recreate the `` Tag's Effect Using Only CSS3 Animations?

をエミュレートします。 CSS3 アニメーションを使用したタグ

CSS3 アニメーションを使用すると、JavaScript を使用せずに点滅するテキスト効果を作成できます。このアプローチでは、JavaScript への依存を排除し、古典的な「瞬き」効果を維持します。

.blink {
  animation: blink-animation 1s steps(5, start) infinite;
  -webkit-animation: blink-animation 1s steps(5, start) infinite;
}

@keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

@-webkit-keyframes blink-animation {
  to {
    visibility: hidden;
  }
}

ログイン後にコピー

This is <span class="blink">blinking</span> text.

ログイン後にコピー

点滅を連続遷移に置き換える他の方法とは異なり、このソリューションはオリジナルの Netscape をキャプチャします。 80% のデューティサイクルでのタグの動作。アニメーションには、表示状態と非表示状態を交互に切り替え、テキストの点滅の外観を模倣します。

この CSS コードは、表示プロパティと非表示プロパティを交互に切り替える「blink-animation」という名前のキーフレームアニメーションを定義します。隠れた状態。「steps()」関数は、遷移が瞬時に行われることを保証し、「まばたき」効果を生み出します。

以上がCSS3 アニメーションのみを使用して「タグ」の効果を再作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。