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

谁践踏了优雅 2023-01-03 15:28 203阅读 0赞

> 作者：**AlbertYang，软件设计师，Java工程师，前端工程师，爱阅读，爱思考，爱编程，爱自由，信奉终生学习，每天学习一点点，就是领先的开始。**
> 
> 微信公众号：**AlbertYang**
> 
> 今天教大家使用CSS实现一个霓虹灯按钮动画效果，大家有什么不懂的可以留言问我，**视频已经同步到B站，欢迎关注我的B站账号。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzODUzNzQz_size_16_color_FFFFFF_t_70][]

### 视频 ###

**视频链接**：[https://www.bilibili.com/video/BV1Zi4y1F7ut][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">关注</a>
 <a href="#" style="--x:1">收藏</a>
 <a href="#" style="--x:2">投币</a>
 <a href="#" style="--x:3">点赞</a>
 <a href="#" style="--x:4">评论</a>
 <a href="#" style="--x:5">转发</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;
    }

![de5bd36dfdddc3ba19086a5b531999c2.gif][]

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIzODUzNzQz_size_16_color_FFFFFF_t_70]: /images/20221119/2e0522e511eb456989a975407535ad51.png
[https_www.bilibili.com_video_BV1Zi4y1F7ut]: https://www.bilibili.com/video/BV1Zi4y1F7ut
[de5bd36dfdddc3ba19086a5b531999c2.gif]: https://img-blog.csdnimg.cn/img_convert/de5bd36dfdddc3ba19086a5b531999c2.gif