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教程(6):创建网站多列
Apr 02 HTML / CSS
css3 矩阵的使用详解
Mar 20 HTML / CSS
css3 边框、背景、文本效果的实现代码
Mar 21 HTML / CSS
利用简洁的图片预加载组件提升html5移动页面的用户体验
Mar 11 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
HTML5实践-图片设置成灰度图
Nov 12 HTML / CSS
HTML5之SVG 2D入门10—滤镜的定义及使用
Jan 30 HTML / CSS
HTML5实现一个能够移动的小坦克示例代码
Sep 02 HTML / CSS
详解使用双缓存解决Canvas clearRect引起的闪屏问题
Apr 29 HTML / CSS
Canvas多边形绘制的实现方法
Aug 05 HTML / CSS
HTML5语义化元素你真的用对了吗
Aug 22 HTML / CSS
不要在HTML中滥用div
May 08 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.ini中文版
2006/10/09 PHP
php中长文章分页显示实现代码
2012/09/29 PHP
8个必备的PHP功能实例代码
2013/10/27 PHP
php获取YouTube视频信息的方法
2015/02/11 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
php实现图片以base64显示的方法
2016/10/13 PHP
window.location和document.location的区别分析
2008/12/23 Javascript
深入理解JavaScript系列(7) S.O.L.I.D五大原则之开闭原则OCP
2012/01/15 Javascript
jQuery常见开发技巧详细整理
2013/01/02 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
javascript-简单的计算器实现步骤分解(附图)
2013/05/30 Javascript
js的alert弹出框出现乱码解决方案
2013/09/02 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
JavaScript的Vue.js库入门学习教程
2016/05/23 Javascript
jQuery 插件封装的方法
2016/11/16 Javascript
快速解决Vue项目在IE浏览器中显示空白的问题
2018/09/04 Javascript
详解在不使用ssr的情况下解决Vue单页面SEO问题
2018/11/08 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
JavaScript实现密码强度实时验证
2020/03/18 Javascript
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
Python随机生成数模块random使用实例
2015/04/13 Python
python中__call__内置函数用法实例
2015/06/04 Python
Python自动扫雷实现方法
2015/07/25 Python
python并发和异步编程实例
2018/11/15 Python
解决Django后台ManyToManyField显示成Object的问题
2019/08/09 Python
将自己的数据集制作成TFRecord格式教程
2020/02/17 Python
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
土木工程应届生求职信
2013/10/31 职场文书
电脑销售顾问自荐信
2014/01/29 职场文书
地理科学专业自荐信
2014/09/01 职场文书
初一年级组工作总结
2015/08/12 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
关于JavaScript回调函数的深入理解
2021/06/27 Javascript
box-shadow单边阴影的实现
2023/05/21 HTML / CSS