【CSS】マウスオンでテキストがネオンのように光るアニメーション
843
マウスオンした時に、文字がネオンのように光るアニメーションを実装します
この記事を書いている人
今日はこれを作っていきます。
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してね♡↓
自作【hoverアニメーション】で差別化♡シンプルなのにこだわってる風CSS 【CSS】かわいい♡桜を散らすアニメーション
コメントは承認後に表示されます。