无锡网站建设系统上海私人做网站
先上效果
(动态的 只不过图是静态的....)
🌟 探照灯文字动效是一种视觉效果，它模仿了探照灯在夜空中扫描文字的动态。常用于网页设计中，增加页面的趣味性。
代码参考：
<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,欢迎~
🌟 关注耀南.，探索更多精彩动画效果！🚀