フリーランスwebデザイナーのwebデザインブログ

ちいさなwebデザインブログCHIIWEB BLOG

【CSS】マウスオンでテキストがネオンのように光るアニメーション

hoverマウスオンでテキストが光るアニメーション

マウスオンした時に、文字がネオンのように光るアニメーションを実装します

この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー&講師
  • 2児ママ
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡

今日はこれを作っていきます。

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じゃなくても、ずっと光らせておいても可愛いですemoji-heart

その場合は、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
}

コメントする

CAPTCHA


コメントは承認後に表示されます。

コメント投稿後元記事のトップに戻ります。
エラー表示が出なければ送信されています^^

関連記事