做知识内容的网站与app,厦门在线制作网站,承德招聘信息网,wordpress xampp 本地先上效果
(动态的 只不过图是静态的....) #x1f31f; 探照灯文字动效是一种视觉效果#xff0c;它模仿了探照灯在夜空中扫描文字的动态。常用于网页设计中#xff0c;增加页面的趣味性。
代码参考#xff1a;
div classTextSearchlight_container__r14vK 探照灯文字动效是一种视觉效果它模仿了探照灯在夜空中扫描文字的动态。常用于网页设计中增加页面的趣味性。
代码参考
div classTextSearchlight_container__r14vKp 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,欢迎~ 关注耀南.探索更多精彩动画效果
