【点滅】HTMLで背景色を簡単に点滅させる方法

こんにちは、ハル@haru_elpisです。

HTMLで背景色を点滅させる簡単な方法の紹介です。

背景色を点滅させるにはCSSの「animation」を使用します。

景色を簡単に点滅させる方法

HTML

<p class="hoge">画面点滅</p>

CSS

<style type="text/css">
.hoge {
  animation: blinkAnimeS2 2s infinite alternate;
}
@keyframes blinkAnimeS2{
   0%{ color : red;   background:white }
 100%{ color : white; background:red   }
}
</style>

ポイント

• infinite を付けると、点滅を無限ループできます。
• @keyframes で変化させる色やタイミングを自由に調整できます。
• あまり派手すぎる点滅は目に負担がかかるので、使う場所や頻度には注意しましょう。

応用例

• ボタンや通知メッセージを目立たせたいとき
• 注意を促すバナーや広告の演出
• イベントページなどの動的なデザイン

CSSだけで簡単に点滅効果をつけられるので、JavaScriptなしで手軽に実装できます。

まとめ

これだけで点滅が簡単にできてしまいます。文字などもできますので是非活用してください。

おわりっ