CSS探照灯动画：打造动态网页的必备技巧！

<div class="TextSearchlight_container__r14vK">
      <p data-text="♠ CSS Animation ♣">♠ CSS Animation ♣</p>
    </div>

.TextSearchlight_container__r14vK {
    background-color: #000;
    display: flex;
    justify-content: center;
    padding: 100px 0 60px;
    position: relative;
    width: 100%
}
.TextSearchlight_container__r14vK p {
    color: #222;
    font-family: SourceHanSansCN-Bold!important;
    font-size: 64px;
    font-weight: 700;
    position: relative
}
.TextSearchlight_container__r14vK p:after {
    animation: TextSearchlight_move__qAFwU 8s ease-in-out infinite;
    -webkit-background-clip: text;
    background-clip: text;
    background-image: linear-gradient(90deg,#ec4899,#ef4444,#eab308);
    -webkit-clip-path: ellipse(60px 60px at 0 50%);
    clip-path: ellipse(60px 60px at 0 50%);
    color: #0000;
    content: attr(data-text);
    left: 0;
    position: absolute;
    top: 0
}
@keyframes TextSearchlight_move__qAFwU {
    50% {
        -webkit-clip-path: ellipse(60px 60px at 100% 50%);
        clip-path: ellipse(60px 60px at 100% 50%)
    }
    to {
        -webkit-clip-path: ellipse(60px 60px at 0 50%);
        clip-path: ellipse(60px 60px at 0 50%)
    }
}