用html和css实现字体发光效果

css部分:

 *{
            /* 页面内外边距初始化 */
            margin: 0;
            padding: 0;
        }
        .text{
            /* 100%的窗口高度 */
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: slateblue;
        }
        span{
            font-size:100px;
            font-weight: 700;
            color:yellow;
            /* 转换为大写 */
            text-transform: uppercase;
            /* 字间距 */
            letter-spacing: 6px;
            /* 模糊滤镜 */
            filter: blur(2px);
            /* 执行动画 */
         animation:trans  3s linear infinite;
        }
      
        /* 定义动画 */
        @keyframes trans{
            0%,100%{
               color: yellow;
               filter: blur(2px);
               /* 文字阴影 */
               text-shadow:
               0 0 10px  lightgreen,
               0 0 20px  lightgreen,
               0 0 30px  lightgreen,
               0 0 40px  lightgreen,
               0 0 100px  lightgreen,
               0 0 200px  lightgreen,
               0 0 300px  lightgreen,
               0 0 400px  lightgreen;
            }
            5%,95%{
                color:skyblue;
                filter: blur(0px);
                text-shadow: none;
            }
        }
        /* 为每一个span标签设置动画延迟时间 */
        span:nth-child(1){
            animation-delay: 0s;
        }
        span:nth-child(2){
            animation-delay: 0.6s;
        }
        span:nth-child(3){
            animation-delay: 1.2s;
        }
        span:nth-child(4){
            animation-delay: 1.8s;
        }
        span:nth-child(5){
            animation-delay: 2.4s;
        }
        span:nth-child(6){
            animation-delay: 3.0s;
        }

html部分:

 <div class="text">
        <span>h</span>
        <span>i</span>
        <span>w</span>
        <span>e</span>
        <span>b</span>
    </div>

页面效果图: