学习
实践
活动
工具
TVP
写文章
专栏首页AlbertYang的编程之路CSS实现霓虹灯按钮,CSS实现炫酷的霓虹灯按钮动画

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

今天教大家使用CSS实现一个霓虹灯按钮动画效果,视频已经同步到B站,大家可以点击底部的阅读原文查看。

视频:

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

今天的学习就到这里了,如果想继续学习提高,欢迎关注我,每天进步一点点,就是领先的开始,加油。如果觉得本文对你有帮助的话,欢迎转发,在看,点赞!!!

文章分享自微信公众号:
AlbertYang

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!

作者:Albert
原始发表时间:2021-01-09
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • CSS 3.0实现霓虹灯按钮动画特效

    越陌度阡
  • CSS实现8种炫酷按钮

    在各种UI组件库大行其道的今天,大家已经很少自己用CSS去实现一些效果了,久而久之CSS的水平也越来越退步,所以有空还是得练练。今天给大家分享8种炫酷按钮的CS...

    MudOnTire
  • CSS 3.0实现酷炫的按钮特效

    越陌度阡
  • 界面按钮样式丑?不可能!16款css实现炫酷按钮

    整理了16款css按钮,经过全部测试,没发现有影响使用的bug,其中也可能存在部分bug,但是应该问题不大。

    青年码农
  • 巧用 CSS 实现酷炫的充电动画

    欧了,勉强就是它了。有了电池,那接下来直接充电吧。最最简单的动画,那应该是用色彩把整个电池灌满即可。

    Sb_Coco
  • 利用CSS变量实现炫酷的悬浮效果

    最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变。

    德顺
  • 纯CSS简单实现的炫酷打字效果

    完整实例: http://github.crmeb.net/u/defu ​​​​​​​

    PHP开发工程师
  • wordpress字体样式——css炫酷的字体样式实现

    这些都是自己在使用wordpress时想要更选一点的样式效果,整理出来的css样式,虽然现在还看不太懂,因为css真的博大精深,但是能够看得懂,然后修改成自己想...

    不愿意做鱼的小鲸鱼
  • 历时4个多月,学习了这 66 个CSS 特效

    这 66 个特效,是我历时4个多月在油管一个一个跟着敲出来的,为了加强记忆,每个练习,我都录制了视频,在这里分享出来给大家。大家可能又会调侃了,你是工作不饱和吧...

    前端小智@大迁世界
  • CSS实现一个粒子动效的按钮

    https://github.com/XboxYan/notes/issues/16

    Nealyang
  • [WPF] 抄一个 CSS3 实现的按钮

    继上一篇文章模仿了一下这个按钮,这篇文章索性抄一下,连动画都模仿过来,顺便熟习下 CSS3。原版:

    dino.c
  • CSS实现一个粒子动效的按钮

    https://github.com/XboxYan/notes/issues/16

    ConardLi
  • 腾讯云开发者社区视频功能正式上线啦!

    云+社区创作中心内测活动在过去的半个月里得到了各位社区创作者的鼎力支持,社区也收获了满满的意见。云+社区创作中心内测活动已经圆满结束!取而代之的是创作中心内容管...

    腾讯云开发者社区
  • HTML+CSS实现炫酷的登录界面「建议收藏」

    发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/136722.html原文链接:https://javaforall.cn

    全栈程序员站长
  • 用HTML和CSS实现酷炫的文字特效

    马上我们就要进入下一个阶段,也就是HTML和CSS实现前端界面的阶段了,想必很多小伙伴都想给自己的页面加点酷炫的特效,今天,我就给大家整理了一些非常酷炫的文字特...

    前端小tips
  • CSS实现按钮的两张图片的同步出现

          通过图片交换实现了按钮图片,但是存在一个问题,老是先加载一个图片,另外一个却加载得慢,效果反而不好。这是网上的解决方法,实现css图片的预加载: <...

    用户1075292
  • 纯CSS实现的文字效果还可以这么酷炫!

    CSS是一门很特殊的语言,你认为CSS只能用来控制网页的结构与样式,但只要你有丰富的想象力,就能创造无限可能。

    前端实验室

扫码关注腾讯云开发者

领取腾讯云代金券