HTMLタグのひとつに、<blink>という要素を点滅させるタグがありました。
Flashなどが主流だった、古いサイトではよく使用されていました。
文字を強調させたい場合に使われるタグでしたが、現在はWebの標準から削除されています。
同じ動きを実装できるCSSで、「text-decoration: blink;」というものもありましたが、こちらも同様現在は使えません。
使用してもGoogle Chrome・Firefox・InternetExplorerなどのモダンブラウザでは動作しないので、使用は避けた方が良いでしょう。
ただ、要素を点滅させてユーザーの視線を向けるというのは今も使用する機会はあるので、<blink>タグを使わずにCSSで点滅を実装する方法をご紹介します。
<blink>タグとは
「Blink」は、日本語で「点滅」という意味です。
<blink>タグとは、タグで囲った要素を点滅させるタグです。
「強調したいテキストを点滅させて、目立つようにする」というのが主な使われ方でした。
マークアップは下記のようにします。
記述方法
HTML
<p><blink>内包する要素が点滅します</blink></p>デモ
ただ、この要素は現在サポートされていません。
使用しても動作しないので、使用は控えるようにしましょう。
「text-decoration: blink;」とは
<blink>タグの代用として、「text-decoration: blink;」というCSSも存在します。
使い方は、点滅させたいテキストに「text-decoration: blink;」を指定します。
記述方法
HTML
<p>内包する要素が点滅します</p>CSS
p {
text-decoration: blink;
}デモ
このCSSも現在はサポートされていません。
使用しても動作しないので、使用は控えるようにしましょう。
CSSでテキストをblink（点滅）させる
テキストを点滅させたい場合は、CSSで代用することができます。
CSSの「animation」を使って似たような動きを再現してみます。
実装方法
HTML
<p class="blink">点滅します</p>CSS
.blink {
-webkit-animation: blink 1s ease infinite;
animation: blink 1s ease infinite;
}
@-webkit-keyframes blink {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes blink {
0% {opacity: 0;}
100% {opacity: 1;}
}デモ
animationの「1s」部分の数値を変えれば点滅する間隔を調整できます。
CSSで画像をblink（点滅）させる
テキストの場合と同じやり方で、画像も点滅させることができます。
実装方法
HTML
<figure class="blink"><img src="dummy.jpg" alt=""></figure>CSS
.blink {
-webkit-animation: blink 1s ease infinite;
animation: blink 1s ease infinite;
}
@-webkit-keyframes blink {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes blink {
0% {opacity: 0;}
100% {opacity: 1;}
}デモ
animationの「1s」部分の数値を変えれば点滅する間隔を調整できます。
アニメーションボタンのサンプル
ボタンを点滅させてユーザーの目線を惹く手法の方が、テキストの点滅よりも使用頻度は高いです。
CSSのanimationを使って簡単に実装できるので、いくつかパターンをご紹介します。
<a class="blink" href="#">button</a>a {
font-weight: 600;
color: #fff;
background: #5876a3;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
box-shadow: 0 4px 0 #3f5c88;
}HTMLはすべて共通のものを使用します。
CSSはボタンの装飾のみすべて共通です。
オーソドックスな点滅
.blink {
-webkit-animation: blink 1s ease infinite;
animation: blink 1s ease infinite;
}
@-webkit-keyframes blink {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes blink {
0% {opacity: 0;}
100% {opacity: 1;}
}滑らかな点滅
.blink {
-webkit-animation: blink 1s ease-in-out infinite alternate;
animation: blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes blink {
0% {opacity: 0;}
100% {opacity: 1;}
}キラッと光る
.blink {
position: relative;
overflow: hidden;
}
.blink::before {
content: "";
width: 20px;
height: 100%;
background: rgba(255,255,255,.8);
position: absolute;
top: -100px;
left: 0;
opacity: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-animation: blink 2s ease-in-out infinite;
animation: blink 2s ease-in-out infinite;
}
@-webkit-keyframes blink {
0% {
-webkit-transform: scale(0) rotate(45deg);
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
-webkit-transform: scale(0) rotate(45deg);
transform: scale(0) rotate(45deg);
opacity: .5;
}
81% {
-webkit-transform: scale(4) rotate(45deg);
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
-webkit-transform: scale(50) rotate(45deg);
transform: scale(50) rotate(45deg);
opacity: 0;
}
}
@keyframes blink {
0% {
-webkit-transform: scale(0) rotate(45deg);
transform: scale(0) rotate(45deg);
opacity: 0;
}
80% {
-webkit-transform: scale(0) rotate(45deg);
transform: scale(0) rotate(45deg);
opacity: .5;
}
81% {
-webkit-transform: scale(4) rotate(45deg);
transform: scale(4) rotate(45deg);
opacity: 1;
}
100% {
-webkit-transform: scale(50) rotate(45deg);
transform: scale(50) rotate(45deg);
opacity: 0;
}
}jQueryでblink（点滅）させる
次はjQueryを使って点滅させる方法です。
テキスト・画像どちらにも使用できます。
実装方法
HTML
<figure class="blink"><img src="dummy.jpg" alt=""></figure>テキストを点滅させたい場合はタグに「class=”blink”」を付与してください。
jQuery
$(function(){
setInterval(function(){
$('.blink').fadeOut(0,function(){$(this).fadeIn(500)});
},1000);
});jQueryの本体ファイルの読み込みを忘れないようにしてください。
本体ファイルをCDNで読み込む方法は以下で紹介しています。
デモ
まとめ
今はほとんど使われる機会のない<blink>についてご紹介しました。
要素を点滅・目立たせたい場合は今回ご紹介したやり方で対応すると良いと思います。