CSS霓虹灯

於小夜

已于 2022-07-14 13:52:59 修改

阅读量380

点赞数

分类专栏： CSS 文章标签： css css3

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

本文链接：https://blog.csdn.net/sunzequan888/article/details/125750317

版权

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

摘要由CSDN通过智能技术生成

最近，我用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);
	backgroun