cman.jp > WEBページ作成TOP > CSSリファレンス > CSSの自動生成 > blink「ブリンク・点滅」のCSS生成
WEBページ作成
広告
blink 「ブリンク・点滅」 のCSS生成
htmlには<blink>タグがありますが、ブラウザ独自仕様のため一部のブラウザしか動作しません。このため、HTML5の規格では廃止されました。
ブラウザ(html)で、ブリンクを実現するためには「JavaScript」や「CSS(style)」を使用します。
当ページでは、IEやChromeでも動作するCSSを使用したサンプル生成を行っています。（古いブラウザなど一部では動作しません）
JavaScriptでブリンクする場合は、以下を参照ください。
JavaScriptで文字列を整形
広告
blink 「ブリンク・点滅」を作ろう
「早いブリンク」や「ゆっくりブリンク」、「色を指定してブリンク」など様々なブリンクを自動生成できます。
| 速度 |
|---|
| 間隔 |
|---|
| 開始 色 |
もっと(+)
|
|---|
| 終了 色 |
もっと(+)
|
|---|
ブリンクは簡単
| 使用したhtml |
<span class="blink">ブリンクは簡単</span>
|
|---|---|
| 生成したCSS コピ-して |
<style type="text/css">
.blink { animation: blinkAnime 1s infinite alternate; } @keyframes blinkAnime{ 0% { color: #ffff00 } 100%{ color: #0000ff } } </style>
|
色々なブリンク
CSSの「animation」を使用することで、色々なブリンクを作成することができます。
多色を使用したブリンク
文字色を2色以上指定することもできます。変化割合と色を追加するだけで、簡単に多色ブリンクが作成できます。
4色のブリンク
<style type="text/css">
.blinkS1 { animation: blinkAnimeS1 2s infinite alternate; } @keyframes blinkAnimeS1{ 0% { color : yellow } /* 33%ごとに色を入れ替え */ 33% { color : blue } 66% { color : green } 100%{ color : red } }
</style>
背景色反転のブリンク
文字色以外にも背景色などもブリンクに加えることが出来ます。
背景反転ブリンク
<style type="text/css">
.blinkS2 { animation: blinkAnimeS2 2s infinite alternate; } @keyframes blinkAnimeS2{ 0%{ color : red; background:white } 100%{ color : white; background:red } }
</style>
色ではなく、文字装飾を使用したブリンク
色以外にもCSSで指定できる大部分で動作をさせることが出来ます。太字や下線（アンダーバー）を使用したブリンクは以下のようになります。
文字の太さによるブリンク
<style type="text/css">
.blinkS3 { animation: blinkAnimeS3 .5s infinite alternate; } @keyframes blinkAnimeS3{ 0% { font-weight : normal } 100%{ font-weight: bold } }
</style>
下線（アンダーバー）のブリンク
<style type="text/css">
.blinkS4 { animation: blinkAnimeS4 .5s infinite alternate; } @keyframes blinkAnimeS4{ 0% { text-decoration: none } 100%{ text-decoration: underline } }
</style>
文字の回転
ブリンクではありませんが、文字を目立たせる場合は以下のような文字回転も有効です。
文字の太さによるブリンク
<style type="text/css">
.blinkS5 { animation: blinkAnimeS5 2s infinite; } @keyframes blinkAnimeS5{ 100% { transform: rotateX(360deg); } }
</style>
注意事項
CSSの「animation」を使用しています。「animation」は、古いブラウザいや一部ブラウザでは動作しません。
「animation」の使い方は以下を参照ください。
animation 「アニメーション」
広告