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色彩
Jan 16 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
CSS3中伪元素::before和::after的用法示例
Sep 18 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
HTML5之多线程(Web Worker)
Jan 02 HTML / CSS
HTML5的自定义属性data-*详细介绍和JS操作实例
Apr 10 HTML / CSS
HTML5 transform三维立方体实现360无死角三维旋转效果
Aug 22 HTML / CSS
基于HTML5 的人脸识别活体认证的实现方法
Jun 22 HTML / CSS
HTML5 视频播放(video),JavaScript控制视频的实例代码
Oct 08 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
Apr 07 HTML / CSS
CSS3实现指纹特效代码
Mar 17 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 array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
php中FTP函数ftp_connect、ftp_login与ftp_chmod用法
2014/11/18 PHP
PHP依赖注入(DI)和控制反转(IoC)详解
2017/06/12 PHP
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
Laravel中GraphQL接口请求频率实战记录
2020/09/01 PHP
javascript下string.format函数补充
2010/08/24 Javascript
jQuery弹性滑动导航菜单实现思路及代码
2013/05/02 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
Python fileinput模块使用实例
2015/05/28 Python
python使用mysql数据库示例代码
2017/05/21 Python
Python中将变量按行写入txt文本中的方法
2018/04/03 Python
python单例模式获取IP代理的方法详解
2018/09/13 Python
python从list列表中选出一个数和其对应的坐标方法
2019/07/20 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
使用python和pygame制作挡板弹球游戏
2019/12/03 Python
Python爬虫防封ip的一些技巧
2020/08/06 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
css3闪亮进度条效果实现思路及代码
2013/04/17 HTML / CSS
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
物业保安员岗位职责
2014/03/14 职场文书
电大毕业个人生自我鉴定
2014/03/26 职场文书
文科毕业生自荐书范文
2014/04/17 职场文书
小学六年级学生评语
2014/04/22 职场文书
师德演讲稿范文
2014/05/06 职场文书
传承焦裕禄精神思想汇报2014
2014/09/10 职场文书
简易版租房协议书范本
2014/10/13 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
导游词之日本富士山
2020/01/06 职场文书
python可视化之颜色映射详解
2021/09/15 Python
《雀魂PONG☆》4月1日播出 PV角色设定情报
2022/03/20 日漫