CSS3.0实现霓虹灯按钮动画特效的示例代码


Posted in HTML / CSS onJanuary 12, 2021

今天给大家分享一个用CSS 3.0实现的霓虹灯按钮动画特效,效果如下:

CSS3.0实现霓虹灯按钮动画特效的示例代码

以下是代码实现,欢迎大家复制粘贴和收藏。

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 3.0实现霓虹灯按钮动画特效</title>
    <style>
        * {
            font-family: '微软雅黑', sans-serif;
            box-sizing: border-box;
        }
 
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            background: #050801;
        }
 
        a {
            position: relative;
            display: inline-block;
            padding: 25px 30px;
            margin: 0 50px;
            color: #03e9f4;
            text-decoration: none;
            overflow: hidden;
            transition: 0.5;
            letter-spacing: 4px;
            -webkit-box-reflect: below 1px linear-gradient(transparent, #0005);
        }
 
        a:nth-child(1) {
            filter: hue-rotate(290deg);
        }
 
        a:nth-child(3) {
            filter: hue-rotate(110deg);
        }
 
        a:hover {
            background: #03e9f4;
            color: #050801;
            box-shadow: 0 0 5px #03e9f4,
                0 0 25px #03e9f4,
                0 0 50px #03e9f4,
                0 0 200px #03e9f4;
        }
 
        a span {
            position: absolute;
            display: block;
        }
 
        a span:nth-child(1) {
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #03e9f4);
            animation: animate1 1s linear infinite;
        }
 
        @keyframes animate1 {
            0% {
                left: -100%;
            }
 
            50%,
            100% {
                left: 100%;
            }
        }
 
        a span:nth-child(2) {
            top: 0;
            right: 0;
            height: 100%;
            width: 2px;
            background: linear-gradient(92deg, transparent, #03e9f4);
            animation: animate2 1s linear infinite;
            animation-delay: 0.25s;
        }
 
        @keyframes animate2 {
            0% {
                top: -100%;
            }
 
            50%,
            100% {
                top: 100%;
            }
        }
 
        a span:nth-child(3) {
            bottom: 0;
            right: -100%;
            height: 2px;
            width: 100%;
            background: linear-gradient(180deg, transparent, #03e9f4);
            animation: animate3 1s linear infinite;
            animation-delay: 0.5s;
        }
 
        @keyframes animate3 {
            0% {
                right: -100%;
            }
 
            50%,
            100% {
                right: 100%;
            }
        }
 
        a span:nth-child(4) {
            bottom: -100%;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(270deg, transparent, #03e9f4);
            animation: animate4 1s linear infinite;
            animation-delay: 0.75s;
        }
 
        @keyframes animate4 {
            0% {
                bottom: -100%;
            }
 
            50%,
            100% {
                bottom: 100%;
            }
        }
    </style>
</head>
 
<body>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        NENO BUTTON
    </a>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        NENO BUTTON
    </a>
    <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        NENO BUTTON
    </a>
</body>
 
</html>

到此这篇关于CSS3.0实现霓虹灯按钮动画特效的示例代码的文章就介绍到这了,更多相关CSS霓虹灯按钮内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
对CSS3选择器的研究(详解)
Sep 16 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
CSS3 Flexbox中flex-shrink属性的用法示例介绍
Dec 30 HTML / CSS
CSS3实现div从下往上滑入滑出效果示例
Apr 28 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
HTML5上传文件显示进度的实现代码
Aug 30 HTML / CSS
localStorage、sessionStorage使用总结
Nov 17 HTML / CSS
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
Jan 10 HTML / CSS
HTML5实现自带进度条和滑块滑杆效果
Apr 17 HTML / CSS
Canvas中设置width与height的问题浅析
Nov 01 HTML / CSS
Html5+CSS3+EL表达式问题小结
Dec 19 HTML / CSS
HTML页面滚动时部分内容位置固定不滚动的实现
Apr 14 HTML / CSS
css3 实现滚动条美化效果的实例代码
Jan 06 #HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 #HTML / CSS
使用CSS3制作版头动画效果
Dec 24 #HTML / CSS
CSS3实现红包抖动效果
Dec 23 #HTML / CSS
html5+css3之制作header实例与更新
Dec 21 #HTML / CSS
CSS3中animation实现流光按钮效果
Dec 21 #HTML / CSS
css3中flex布局宽度不生效的解决
Dec 09 #HTML / CSS
You might like
php 深入理解strtotime函数的使用详解
2013/05/23 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
2012/12/16 Javascript
很好用的js日历算法详细代码
2013/03/07 Javascript
利用jQuery的deferred对象实现异步按顺序加载JS文件
2013/03/17 Javascript
BootStrap的Datepicker控件使用心得分享
2016/05/25 Javascript
JavaScript中的this使用详解
2016/07/27 Javascript
jQuery实现菜单栏导航效果
2017/08/15 jQuery
angularjs实现天气预报功能
2020/06/16 Javascript
详解vue 自定义marquee无缝滚动组件
2019/04/09 Javascript
bootstrap实现嵌套模态框的实例代码
2020/01/10 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
[37:29]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.19
2020/11/19 DOTA
Python3.2中的字符串函数学习总结
2015/04/23 Python
Flask框架实现给视图函数增加装饰器操作示例
2018/07/16 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
python操作kafka实践的示例代码
2019/06/19 Python
Python 图像处理: 生成二维高斯分布蒙版的实例
2019/07/04 Python
python使用if语句实现一个猜拳游戏详解
2019/08/27 Python
python Popen 获取输出,等待运行完成示例
2019/12/30 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
Pycharm快捷键配置详细整理
2020/10/13 Python
浅谈HTML5 defer和async的区别
2016/06/07 HTML / CSS
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
html5 datalist标签使用示例(自动完成组件)
2014/05/04 HTML / CSS
凌阳科技股份有限公司C++程序员面试题笔试题
2014/11/20 面试题
System.Array.CopyTo()和System.Array.Clone()有什么区别
2016/06/20 面试题
趣味体育活动方案
2014/02/08 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
2016年教师反腐倡廉心得体会
2016/01/13 职场文书
七年级数学教学反思
2016/02/17 职场文书
Java 超详细讲解IO操作字节流与字符流
2022/03/25 Java/Android
redis复制有可能碰到的问题汇总
2022/04/03 Redis