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