css3按钮动态效果展示的网页特效代码,css动画效果代码案例

　　今天给大家分享一个用CSS 3.0实现的霓虹灯按钮动画特效，效果如下：

　　以下是代码实现，欢迎大家复制粘贴和收藏。

　　！DOCTYPE html html lang= en head meta charset= UTF-8 meta name= viewport content= width=device-width，initial-scale=1.0 titleCSS 3.0实现霓虹灯按钮动画特效/title style * { font-family:微软雅黑，无衬线；框大小：边框-框；} body { display:flex；对齐-项目：居中；对齐-内容：居中；最小高度：100vh背景：# 050801;} a {位置：相对；显示：内嵌-块；填充：25像素30像素边距：0 50像素颜色：# 03e 9 F4；文字-装饰：无；溢出：隐藏；过渡：0.5;字母间距：4px-webkit-box-reflect:低于1px线性-渐变（透明，# 0005);} a:n-child(1){滤镜：色调-旋转(290度)；} a:n-child(3){滤镜：色调-旋转(110度)；} a:悬停{背景：# 03e 9 F4；颜色：# 050801;盒影：0 0 5px #03e9f4，0 0 25px #03e9f4，0 0 50px #03e9f4，0 0 200 px # 03e 9 f 4；} a span { position:absolute；显示：块；} a span:n-child(1){ top:0；左：-100%;宽度：100%;高度：2px背景：线性渐变(90度，透明，# 03e 9 f 4)；动画：动画1 1s线性无限；} @关键帧动画1 { 0% { left:-100%；} 50%,100% {左：100%;} } a span:n-child(2){ top:0；右：0;身高：100%;宽度：2px背景：线性渐变(92度，透明，# 03e 9 f 4)；动画：动画2 1s线性无限；动画-延迟：0.25秒；} @关键帧动画2 { 0% { top:-100%；} 50%，100% { top:100%；} } a span:n-child(3){ bottom:0；右：-100%;高度：2px宽度：100%;背景：线性渐变(180度，透明，# 03e 9 f 4)；动画：动画3 1s线性无限；动画-延迟：0.5s} @关键帧动画3 { 0% {右：-100%；} 50%,100% {右：100%;} } a span:n-child(4){ bottom:-100%；左：0;宽度：2px身高：100%;背景：线性渐变(270度，透明，# 03e 9 f 4)；动画：动画4 1s线性无限；动画-延迟：0.75秒；} @关键帧动画4 { 0% {底部：-100%；} 50%,100% {底部：100%;} }/style/head body a href= NENO按钮/a href= # span span/span span/span span/span span/到此这篇关于CSS3.0实现霓虹灯按钮动画特效的示例代码的文章就介绍到这了，更多相关半铸钢钢性铸铁(铸造半钢)霓虹灯按钮内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。