CSS霓虹灯

已于 2022-07-14 13:52:59 修改 · 445 阅读

文章标签：

#css #css3

于 2022-07-12 19:41:13 首次发布

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文分享了一种使用CSS创建霓虹灯特效的方法。通过CSS代码实现鼠标悬停时霓虹灯亮起的效果，背景建议设为深色，以增强霓虹灯的视觉效果。代码灵感来源于wpz。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近，我用CSS做了一个霓虹灯特效，鼠标悬停开灯，个人觉得非常好看，来这里分享一下。

感谢wpz提供代码灵感。

====================================================

CSS代码：

.neonlight {
	color: white;
	border-radius: 2px;
	border: 1px solid rgb(175, 175, 175);
	background-color: transparent;
	font-size: 14px;
	padding: 10px 20px;
	transition-duration: 0.45s;
}

.neonlight:hover {
	transition-duration: 0.45s;
    -webkit-box-shadow: 1px 1px 99px 6px rgba(255, 255, 255, .8);/* Safari Chrome */
	-moz-box-shadow: 1px 1px 99px 6px rgba(255, 255, 255, .8);/* Fire Fox */
	box-shadow: 1px 1px 99px 6px rgba(255, 255, 255, .8);
	background-color: rgb(255, 255, 255);
	color: black;
}

HTML代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS霓虹灯特效</title>
		<link rel="stylesheet" href="neonlight.css">
	</head>
	<body style="background-color:#445545;">
        <center>
            <br/><br/><br/><br/><br/><br/>
		    <div class="neonlight">霓虹灯</div>
        </center>
	</body>
</html>

先设定霓虹灯初始样式，然后再设定过度时间0.45秒，最后设置开灯样式（就是加了一个浅色阴影box-shadow，背景建议深色，在黑的环境里才像开灯，你说捏）

====================================================

效果：