今天离家了，走在回小区的路上发现路边有很多霓虹灯牌很好看也很耀眼，我们用CSS来实现一下吧！
效果图
页面结构
这个结构比较简单，
#app盒子里面就放一个类名为neon的盒子，这个盒子是霓虹灯牌，里面是霓虹灯要显示的文字
<div id="app"> <div class="neon"> 中秋快乐 </div> </div>
初始化样式
清除所有元素的内外边距，默认让
#app盒子铺满整个屏幕且通过flex布局设置内容水平垂直居中并将背景色设置为黑色，便于效果的展示
* { margin: 0; padding: 0; } #app { width: 100vw; height: 100vh; background: #000; display: flex; justify-content: center; align-items: center; }
文字竖向排列实现
文字默认是横向排列，我们通过CSS的
writing-mode: vertical-rl;竖向让盒子里面的内容进行竖向排列
.neon { writing-mode: vertical-rl; font-size: 40px; color: #fff; letter-spacing: 10px; }
灯牌效果实现
给灯牌盒子设置好内边距且使用CSS属性实现圆角，在设置上边框和边框颜色就可以了
.neon { writing-mode: vertical-rl; font-size: 40px; color: #fff; letter-spacing: 10px; padding: 15px 10px; border-radius: 50px; border: 3px solid #FFF6F9; }
文字阴影实现
文字阴影实现用到了CSS的
text-shadow属性,我们给文字多个阴影，每个阴影用逗号进行隔开
.neon { writing-mode: vertical-rl; font-size: 40px; color: #fff; letter-spacing: 10px; text-shadow: 0 0 10px #10b3aa, 0 0 20px #10b3aa, 0 0 40px #10b3aa, 0 0 80px #10b3aa, 0 0 160px #10b3aa; padding: 15px 10px; border-radius: 50px; border: 3px solid #FFF6F9; }
文字变换颜色实现
霓虹灯的文字颜色是可以动态变换的，所以我们这里需要使用到CSS动画，还使用到了
filter属性中的hue-rotate,该属性可以对应用色进行相应的旋转，这个属性结合我们之前定义的文字阴影就可以实现文字变色效果
.neon { writing-mode: vertical-rl; font-size: 40px; color: #fff; letter-spacing: 10px; text-shadow: 0 0 10px #10b3aa, 0 0 20px #10b3aa, 0 0 40px #10b3aa, 0 0 80px #10b3aa, 0 0 160px #10b3aa; padding: 15px 10px; border-radius: 50px; border: 3px solid #FFF6F9; box-shadow: 0 0 10px 0 #FFF6F9; animation: textBg 4s linear infinite; } @keyframes textBg { 0% { filter: hue-rotate(0deg); } 100% { filter: hue-rotate(360deg); } }
代码我放到码上掘金上了，感兴趣的可以看一下！
