HTML+CSS 探照灯动画：打造动态网页的必备技巧！-CSDN博客

本文链接：https://blog.csdn.net/YN2000609/article/details/141425352

先上效果

(动态的只不过图是静态的....)

🌟 探照灯文字动效是一种视觉效果，它模仿了探照灯在夜空中扫描文字的动态。常用于网页设计中，增加页面的趣味性。

代码参考：

<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%)
    }
}

综上，效果实现了, 后续有什么想要的欢迎大家留言，也可以加喔微信, 18634371151,欢迎~

🌟 关注耀南.，探索更多精彩动画效果！🚀