霓虹灯效果

模拟左右移动的霓虹灯效果

<style>
        body{
            background:#e2e2e2;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        h1{
            font-size: 50px;
            letter-spacing: -3px;
            font-family: Arial, Helvetica, sans-serif;
            position: relative;
        }
        h1::after{
            content: attr(data-spot);
            color: transparent;//文字透明，该功能核心属性
            position: absolute;
            top: 0;
            left: 0;
            clip-path: ellipse(50px 50px at 0% 50%);//只显示裁剪区域内的内容，该功能核心属性
            animation: spotlight 5s infinite;
            background-image: linear-gradient(to right, red , yellow);
            background-clip: text;//背景色剪裁，该功能核心属性
            -webkit-background-clip: text;

        }
        @keyframes spotlight{//自定义动画
            0%{
                clip-path: ellipse(50px 50px at 0% 50%);
            }
            50%{
                clip-path: ellipse(50px 50px at 100% 50%);
            }
            100%{
                clip-path: ellipse(50px 50px at 0% 50%);
            }
        }
    </style>

 <h1 data-spot="Yanhuanxinxing">
        Yanhuanxinxing
    </h1>