如何用纯CSS实现炫酷的霓虹灯效果？

CSS:body{background:#050901;}.light{宽度：适合内容；填充：25px30px；颜色：#03e9f4；字体大小：24px；文本转换：大写；过渡：0.5s；字母间距：4px；cursor:pointer;}.light:hover{背景颜色：#03e9f4;颜色：#050801；005px#03e9f4,0025px#03e9f4,0050px#03e9f4,00200px#03e9f4;}最终效果如下：移动光束的实现虽然看起来只有一根光束沿着边缘移动按键，其实这是四根光束向不同方向移动的叠加效果。它们运动的方向分别为：从左到右、从上到下、从右到左、从下到上，如下图所示：在这个过程中，梁与梁之间存在交点。如果只看按钮光束的边缘部分，看起来就像只有一根光束在顺时针方向移动。以下是具体实现中需要注意的几点：四个光束分别对应div.light的四个子div，初始位置分别为按钮的最左、最上、最右、最下，以及按照固定的方向做重复动作。每条光束的高度或宽度都很小（只有2px），并且有从透明色到霓虹色的渐变，所以外观会有一种收缩的效果（就是看起来不像一条完整的线）来制作确定我们看到的是顺时针运动，四个横梁的运动其实是有顺序的，先是按钮上方的横梁开始移动，过了一会儿，右边的横梁开始移动，在过了一会儿，下面的横梁动了，过了一会儿，左边的光束动了。光束之间的移动存在延迟。以上梁和右梁为例。如果同时开始移动，右侧的移动距离小于上侧的移动距离，会导致两根光束错失相交的机会，我们看到的是断开的、不相干的光束。由于右光束的移动距离比较短，为了让上光束“追上”它，我们不得不“延迟开始”右光束，所以我们需要给它一个动画延迟；同样，剩下的两根光束也需要有一个动画延迟。多个动画延迟之间大约0.25秒的差异是可以的。只显示按钮边缘的光束就够了，所以为div.light设置溢出隐藏代码如下：HTML:

/div>

霓虹灯按钮

CSS:.light{position:relative;填充：25px30px；颜色：#03e9f4；字体大小：24px；文本转换：大写；过渡：0.5s；字母间距：4px；游标：指针；溢出：隐藏；}.light：hover{背景颜色：#03e9f4；颜色：#050801；,0050px#03e9f4,00200px#03e9f4;}.lightdiv{position:absolute;}.lightdiv:nth-child(1){width:100%;高度：2px；顶部：0；左：-100%；背景：线性渐变（向右，透明，#03e9f4）；动画：animate11s线性无限;}.lightdiv:nth-child(2){width:2px;高度：100%；顶部：-100%；右：0；背景：线性渐变（到底部，透明，#03e9f4）；动画：animate21s线性无限；animation-delay:0.25s;}.lightdiv:nth-child(3){width:100%;高度：2px；底部：0；右：-100%；背景：线性渐变（向左，透明，#03e9f4）；动画：animate31s线性无限；animation-delay:0.5s;}.lightdiv:nth-child(4){width:2px;高度：100%；底部：-100%；左：0；背景：线性渐变（到顶部，透明，#03e9f4）；动画：animate41s线性无限；animation-delay:0.75s;}@keyframesanimate1{0%{left:-100%;}50%,100%{左:100%;}}@keyframesanimate2{0%{顶部：-100%；}50%,100%{顶部:100%;}}@keyframesanimate3{0%{右：-100%；}50%,100%{右：100%；}}@keyframesanimate4{0%{底部：-100%；}50%,100%{底部:100%;}}这样就可以实现文章开头图片的不同效果如果你想要其他颜色的霓虹灯效果怎么办？是否需要重新修改相关颜色？其实我们有更简单的方法，就是使用filter:hue-rotate(20deg)一次性修改div.light和所有内部元素的色调。hue-rotate()CSS函数旋转元素及其内容的色调。最终效果如下：