それを点滅させるHTMLチュートリアル–コード例を使用した点滅タグの使用方法

Webの初期の頃、blinkタグのようなHTML要素は、Webページを活気づけるためにいくつかのアニメーション効果を追加するネイティブな方法でした。今日、これらのアニメーションを使用して、Webサイトやアプリにフレアを追加するにはどうすればよいですか?

  • HTMLタグの点滅とは何ですか?
  • 点滅タグはどのように使用しますか?
  • まだ点滅タグを使用できますか?
  • CSSアニメーションで点滅タグを再作成

HTMLタグの点滅とは何ですか?

点滅タグ()は、そのタグのコンテンツをゆっくりと点滅させる廃止されたHTMLタグです。

これは、マーキータグ()などの他の廃止されたタグとともに、サイトに簡単なアニメーション効果を追加する簡単な方法でした。

点滅タグはどのように使用しますか?

点滅タグは単純なHTML要素であるため、コンテンツに合わせて使用​​します。

たとえば、blink-182の「blink」という単語を点滅させたい場合は、次のHTMLを記述します。

blink-182

まだ点滅タグを使用できますか?

上記のgifでお気づきかもしれませんが、このタグは廃止されました。

これは、blinkHTMLタグ自体を使用できないことを意味します。しかし、それは私たちがその点滅する栄光のすべてでそれを作り直すことを妨げるべきではありません。

注:アクセシビリティの問題により、Blinkタグは非推奨になりました。同じ効果をもたらすソリューションを使用する前に、調査を行ってください。プロジェクトを可能な限り包括的にするように努力する必要があります。

CSSアニメーションで点滅タグを再作成

今日のWeb開発の世界では、アニメーションは通常CSSまたはJavaScriptで処理されます。CSSアニメーションを使用すると、数行で点滅タグを再作成して、ビジネスに戻ることができます。

次のCSSを使用します。

.blink { animation: blink 1s steps(1, end) infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } 

.blinkクラスを任意のHTML要素に追加して、点滅させることができます。

blink-182

点滅タグの最新化

これは2020年ですが、もう少しスムーズなものが必要な場合はどうでしょうか。

まず、stepsアニメーション定義からを削除することで、アニメーションをフェードさせることができます。

.blink { animation: blink 1s infinite; } 

または、SF効果のようにフェードアウトさせたい場合はどうすればよいでしょうか。

.blink { animation: blink 3s infinite; } @keyframes blink { 0% { opacity: 1; } 100% { opacity: 0; color: blue; } } 

または、素晴らしい成長とフェード効果さえあります。

.blink { animation: blink 3s infinite; } @keyframes blink { 0% { opacity: 1; } 50% { opacity: 0; transform: scale(2); } 51% { opacity: 0; transform: scale(0); } 100% { transform: scale(1); opacity: 1; } } 

CSSでアニメーションを制御する

点滅タグを使用できない場合でも、まだ多くのオプションがあります。CSSには多数のアニメーションオプションがネイティブに用意されているため、お気に入りのHTML娯楽を再現する場合でも、エイリアンのタイトルシーケンスを再現する場合でも、可能性は事実上無限です。

Javascript、UX、その他の興味深いものについては、私に従ってください!

  • ?Twitterでフォローミー
  • ?️私のYoutubeを購読する
  • ✉️私のニュースレターにサインアップ