CHIIWEB BLOG【CSS】マウスオンでテキストがネオンのように光るアニメーション
マウスオンした時に、文字がネオンのように光るアニメーションを実装します
この記事を書いている人
今日はこれを作っていきます。
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
}記事を気に入ってもらえたら、
ポチっとしてくれると嬉しいです
自作【hoverアニメーション】で差別化♡シンプルなのにこだわってる風CSS 【CSS】かわいい♡桜を散らすアニメーション
コメントは承認後に表示されます。
コメント投稿後元記事のトップに戻ります。
エラー表示が出なければ送信されています＾＾