我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

今天离家了，走在回小区的路上发现路边有很多霓虹灯牌很好看也很耀眼，我们用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);
            }
        }

代码我放到码上掘金上了，感兴趣的可以看一下！

坚持努力，无惧未来！