【CSS】マウスオンでテキストがネオンのように光るアニメーション
2344
マウスオンした時に、文字がネオンのように光るアニメーションを実装します
この記事を書いている人
今日はこれを作っていきます。
hoverしてみてね
htmlはリンクを貼るだけです。
<div class="neon">
<a href="#">LINK</a>
</div>
CSSもめっちゃ簡単
.neon a {
color: white;
font-size: 5vw;
letter-spacing: 2vw;
transition: 1s;
}
.neon a:hover {
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 20px #fff,
0 0 40px #b2ebf5,
0 0 80px #b2ebf5,
0 0 90px #b2ebf5
}
hoverしたタイミングで、text-shadowを使ってネオンっぽくしています。
.neon a
のカラーとtext-shadow
のカラーを変更して、好きな色で試してみてくださいね。
hoverじゃなくても、ずっと光らせておいても可愛いです
その場合は、hover
じゃなくてa
に指定してくださいね。
.neon a {
text-shadow:
0 0 7px #fff,
0 0 10px #fff,
0 0 20px #fff,
0 0 40px #b2ebf5,
0 0 80px #b2ebf5,
0 0 90px #b2ebf5
}
いいなと思ったら
TAPしてね♡↓
【CSS】シンプルなのにこだわってる風ホバーエフェクト 【CSS】かわいい♡桜を散らすアニメーション
コメントは承認後に表示されます。