webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

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

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

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

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

Marie

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

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

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
}

いいなと思ったら
TAPしてね♡↓

コメントする

CAPTCHA


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

Home Webデザイン コーディング コピペ用コード 【CSS】マウスオンでテキストがネオンのように光るアニメーション

関連記事

更新通知を受け取る

不定期更新の為、更新お知らせを受け取りたい方は
ご登録ください^^

更新通知以外のメールは
お送りしませんのでご安心ください。