CSS实现霓虹灯按钮，CSS实现炫酷的霓虹灯按钮动画

作者：AlbertYang，软件设计师，Java工程师，前端工程师，爱阅读，爱思考，爱编程，爱自由，信奉终生学习，每天学习一点点，就是领先的开始。

微信公众号：AlbertYang

今天教大家使用CSS实现一个霓虹灯按钮动画效果，大家有什么不懂的可以留言问我，视频已经同步到B站，欢迎关注我的B站账号。

视频

视频链接：https://www.bilibili.com/video/BV1Zi4y1F7ut

CSS霓虹灯按钮动画，CSS实现炫酷的霓虹灯按钮动画

HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>霓虹灯按钮：微信公众号AlbertYang</title><link rel="stylesheet" href="style.css">
</head>
<body><!-- 容器 --><div class="container"><!-- 按钮 --><a href="#" style="--x:0"><span>关注</span></a><a href="#" style="--x:1"><span>收藏</span></a><a href="#" style="--x:2"><span>投币</span></a><a href="#" style="--x:3"><span>点赞</span></a><a href="#" style="--x:4"><span>评论</span></a><a href="#" style="--x:5"><span>转发</span></a></div>
</body>
</html>

CSS

/* 清除浏览器默认边距，
使边框和内边距的值包含在元素的height和width内 */
* {margin: 0;padding: 0;box-sizing: border-box;
}
/* flex布局，让内容垂直和水平居中 */
body {display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #000;
}
/* flex布局，让内容垂直和水平居中，超过的部分换行显示 */
.container {display: flex;justify-content: center;align-items: center;flex-wrap: wrap;
}
/* 按钮的基本样式 */
.container a {position: relative;padding: 15px 30px;margin: 50px;border: 2px solid #0f0;font-size: 18px;font-weight: 600;text-decoration: none;letter-spacing: 5px;color: #fff;filter: hue-rotate(calc(var(--x) * 60deg));transition: 0.5s;
}
/* 鼠标经过时改变按钮样式 */
.container a:hover {transition-delay: 1.5s;color: #000;box-shadow: 0 0 10px #0f0,0 0 20px #0f0,0 0 40px #0f0,0 0 80px #0f0,0 0 160px #0f0,0 0 320px #0f0;
}
a span {position: relative;z-index: 10;
}
/* 通过伪元素::before实现按钮左边的线 */
.container a::before {content: "";position: absolute;left: -20px;top: 50%;transform: translateY(-50%);background: #0f0;width: 20px;height: 2px;box-shadow: 5px -8px 0 #0f0,5px 8px 0 #0f0;transition: width 0.5s, height 0.5s, left 0.5s,box-shadow 0.5s;transition-delay: 0s, 1s, 0s, 0.5s;
}
/* 鼠标经过时改变线条的样式 */
.container a:hover::before {width: 60%;height: 100%;left: -2px;box-shadow: 0 0 0 #0f0,0 0 0 #0f0;
}
/* 通过伪元素::after实现按钮右边的线 */
.container a::after {content: "";position: absolute;right: -20px;top: 50%;transform: translateY(-50%);background: #0f0;width: 20px;height: 2px;box-shadow: -5px -8px 0 #0f0,-5px 8px 0 #0f0;transition: width 0.5s, height 0.5s, right 0.5s,box-shadow 0.5s;transition-delay: 0s, 1s, 0s, 0.5s;
}
/* 鼠标经过时改变线条的样式 */
.container a:hover::after {width: 60%;height: 100%;right: -2px;box-shadow: 0 0 0 #0f0,0 0 0 #0f0;
}

今天的学习就到这里了，由于本人能力和知识有限，如果有写的不对的地方，还请各位大佬批评指正。有什么不明白的地方欢迎给我留言，如果想继续学习提高，欢迎关注我，每天进步一点点，就是领先的开始，加油。如果觉得本文对你有帮助的话，欢迎转发，评论，点赞！！！

CSS实现霓虹灯按钮，CSS实现炫酷的霓虹灯按钮动画相关推荐

这是基于HTML+CSS+JQ做的一款炫酷的旋转时钟网页代码
这是基于HTML+CSS+JQ做的一款炫酷的旋转时钟代码,非常好看,里面充分的利用了对jq+css的使用,希望对于各位程序猿有帮助展示效果项目目录展示 html代码 css部分代码 * { ...
HTML+CSS+JS 实现抖音3D炫酷相册? 创意网页小礼物了解一下呗？（纪念日的小浪漫）
为心爱的人做一个超具创意的网页生日祝福吧❤(飘动爱心3D相册)HTML+CSS+JavaScript 是不是还没有给心爱的人准备小礼物呀,但是别担心,精心创作了一个"飘动爱心3D相册&quo ...
CSS3和js炫酷点击按钮3D翻转动画特效
简要教程 flipside是一款使用CSS3和js制作的炫酷点击按钮无缝过渡到确认面板的过渡动画特效.该点击按钮特效在按钮不同方向的边部点击时,产生的过渡动画特效是不一样的. 在线预览源码下载 ...
css3特效框,科技常识：6种非常炫酷的CSS3按钮边框动画特效
今天小编跟大家讲解下有关6种非常炫酷的CSS3按钮边框动画特效 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关6种非常炫酷的CSS3按钮边框动画特效的相关资料,希望小伙伴们看了有所帮助. ...
html边框炫酷效果,6种炫酷的CSS3按钮边框动画特效_html/css_WEB-ITnose
这是一款效果非常炫酷的CSS3按钮边框动画特效.这组按钮边框动画共有6种不同的效果.当鼠标滑过按钮的时候,按钮的边框会以不同的方式进行各种动画,效果非常的炫酷. 在线预览源码下载使用方法 HTML ...
html动画图片重叠,CSS3炫酷堆叠图片展示动画特效
这是一款效果的CSS3炫酷堆叠图片展示动画特效.该堆叠图片展示效果是将一组图片堆叠在一起,然后以各种CSS动画效果来切换最上面的一张图片.该特效将使用纯CSS3制作,它可以在所有现代浏览器和移动设备上 ...
html5可折叠面板,纯CSS3炫酷3D折叠面板动画特效
这是一款纯 CSS3 制作的炫酷3D折叠面板动画特效.这个效果使用3D CSS animations 来制作折叠面板的动画,纯CSS,没有使用javascript. HTML结构折叠面板的html结 ...
【CSS3】多款炫酷鼠标悬停图文动画效果
演示效果: HTML代码如下: <!doctype html> <html lang="zh"> <head><meta charset= ...
图片动画效果html5,8个实用炫酷的HTML5图片动画应用
原标题:8个实用炫酷的HTML5图片动画应用近期我们发布了不少关于HTML5和jQuery的图片动画应用,很多都比较实用,也有一些效果非常炫酷,比如一些HTML5 3D图片动画特效.本文精选了8个实 ...

CSS实现霓虹灯按钮，CSS实现炫酷的霓虹灯按钮动画

视频

HTML

CSS

CSS实现霓虹灯按钮，CSS实现炫酷的霓虹灯按钮动画相关推荐

最新文章

热门文章