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;
}

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

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__0809 返回首页