专栏首页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(AlbertYang666),作者:Albert

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2021-01-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

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

    越陌度阡
  • 云+社区视频功能正式上线啦!

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

    云加社区
  • 历时4个多月,学习了这 66 个CSS 特效

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

    前端小智@大迁世界
  • 来安装一个酷炫的 VS Code 主题更好的刷题

    最近一直在 VSCode 上刷 LeetCode 题目,写久了感觉界面有点沉闷,决定找一个酷炫的主题来醒目一下。

    五分钟学算法
  • 仅用 CSS 实现赛博朋克 2077 风格视觉效果

    《赛博朋克2077》 是一款动作角色类游戏,于 2020年12月10日 登陆各大游戏平台。故事发生在夜之城,权力更迭和身体改造是这里不变的主题。玩家将扮演一名野...

    zz_jesse
  • 618设计没想法?这波灵感解读拿走不谢!

    618作为电商活动一年中力度较大的一次,很多商家、平台、app都会不遗余力做一些活动,争取在下半年的各种大促打好前站、奠定好店铺的销售基础。作为设计师的我们,面...

    用户1730674
  • 我写CSS的常用套路(附demo的效果实现与源码)

    有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇。

    Nealyang
  • 我写CSS的常用套路(附demo的效果实现与源码)

    有时候,我们需要给多个元素添加同一个动画,播放后,不难发现它们会一起运动,一起结束,这样就会显得很平淡无奇。

    ConardLi
  • 超养眼!高清壁纸美图,这里有很多多多多多多多多多

    MoSplash,原本是一款 iOS app,能帮你搜集世界各地的无版权高清美图。

    知晓君
  • 微视品牌体验设计

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? ? 项目背景 2017年是整个短视频大爆发的时期,内容产业逐渐成为移动互联网新的...

    腾讯ISUX
  • 用Matplotlib创建Synthwave

    synthwave是一种独特而独特的音乐流派,其灵感来自1980年代的怀旧风格,是技术人员共同的最爱。喜欢它,并且发现它的艺术风格令人难以置信地令人着迷。

    代码医生工作室
  • 玩转SVG让设计更出彩

    ? 腾讯ISUX isux.tencent.com 社交用户体验设计 ? 使用SVG,提升视觉设计表现力,让设计更出彩。 ? 前言 SVG 概述 随着浏览器...

    腾讯ISUX
  • 神经形态计算技术有望成为智能无人系统的关键

    美国田纳西大学和橡树岭国家实验室的科研人员研制出一台基于神经形态计算技术的机器人。 一个由美国田纳西大学(University of Tennessee)和橡树...

    人工智能快报
  • CSS实现8种炫酷按钮

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

    MudOnTire
  • Math.random() 还能这样玩?

    相信大家对 Math.random 函数都不会陌生,调用该函数后会返回一个伪随机数,对应的取值范围是 [0, 1)。在日常工作中,应用的比较多的场景是生成 UU...

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

    越陌度阡
  • 基于HTML/CSS/JS的十一个情人节表白可爱小游戏、小动画【情人节主题征文】

    本来想赶在前几天在情人节之前把这篇文章写完,结果又是过年,又是走亲戚,情人节这天我又和女朋友看电影去了,所以一直到今天,白天忙完了事情,这才给大家带来这些基于H...

    海拥
  • 11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画【情人节主题征文】

    本来想赶在前几天在情人节之前把这篇文章写完,结果又是过年,又是走亲戚,情人节这天我又和女朋友看电影去了,所以一直到今天,白天忙完了事情,这才给大家带来这些基于H...

    海拥
  • 2021 年 VS Code 主题推荐

    一个好的工作环境,离不开一个好的生产力工具(高配电脑)、一个高分辨率显示器(27 寸 4 K)、一个人体工学椅和一套优良的键鼠。

    ConardLi

扫码关注云+社区

领取腾讯云代金券