网站开发需求调研,响应式网站应该怎么做,西安购物网站建设,徐州网站的优化先上效果
(动态的 只不过图是静态的....) #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,欢迎~ 关注耀南.探索更多精彩动画效果
