CSS3: グローテキスト

最近、ちょこちょこ見かけるようになったグローテキスト。

Glow Text (リンク先で実際の動きを見れます)

.glow {
-webkit-animation-direction: alternate;
-webkit-animation-duration: 1s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name: glow;
}
@-webkit-keyframes glow {
0% {
color: black;
}
100% {
color: red;
}
}

ボタン周辺(box-shadow)を点滅させるのも同じ原理です。

コメントを残す