ページ内目次

ぇえ〜っ! チカチカさせたいんですかぁ – イマドキ文字を点滅させる方法

「工事中」って文字を赤で点滅させたいんですけど

 

(;´Д`)

えっ

固まりました(笑)

イマドキ、工事中としたい人はさすがにいないと思いますが、点滅させたいは意外といます

「各ブラウザからも、text-decoration:blink; なるものは消え去っているというのに、それでもあなたはチカチカしたいのですか」

と、やお客様に言えるわけもなく、渋々「はいはい」とお答えします

で、実現するには以下のように擬似的にblinkを作ってやるというわけです

 

/* 点滅 */
.blinking{
	color:#ff0000;
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

 

↑上へまいりま〜す