文字聚光灯效果

  <div id="app">qdleader</div>
 #app {
            font-weight: bold;
            width: max-content;
            color: gray;
            position: relative;
            text-transform: uppercase;
            font-size: 100px;
        }

        #app::after {
            content: "qdleader";
            position: absolute;
            inset: 0;
            background-image: linear-gradient(to right, rgb(236, 72, 153), rgb(239, 68, 68), rgb(234, 179, 8));
            background-clip: text;
            -webkit-background-clip: text;
            color: transparent;
            clip-path: ellipse(100px 100px at 0 50%);
            animation: qd 3s ease-in infinite;
        }

        @keyframes qd {
            50% {
                clip-path: ellipse(100px 100px at 100% 50%);
            }

            to {
                clip-path: ellipse(100px 100px at 0% 50%);
            }
        }