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