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 01 HTML / CSS
浅析CSS3中鲜为人知的属性:-webkit-tap-highlight-color
Jan 12 HTML / CSS
css3 实现圆形旋转倒计时
Feb 24 HTML / CSS
css3实现椭圆轨迹旋转的示例代码
Oct 29 HTML / CSS
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
May 28 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
Dec 13 HTML / CSS
H5 video poster属性设置视频封面的方法
May 25 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
CSS3 实现的图片悬停的切换按钮
Apr 13 HTML / CSS
深入理解CSS 中 transform matrix矩阵变换问题
Aug 30 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笔记之:数据类型与常量的使用分析
2013/05/14 PHP
PHP导出EXCEL快速开发指南--PHPEXCEL的使用详解
2013/06/03 PHP
在 Laravel 中 “规范” 的开发短信验证码发送功能
2017/10/26 PHP
Laravel多用户认证系统示例详解
2018/03/13 PHP
Yii框架的redis命令使用方法简单示例
2019/10/15 PHP
Laravel 微信小程序后端实现用户登录的示例代码
2019/11/26 PHP
DIY jquery plugin - tabs标签切换实现代码
2010/12/11 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
2012/03/04 Javascript
如何用jquery控制表格奇偶行及活动行颜色
2014/04/20 Javascript
ES6中如何使用Set和WeakSet
2016/03/10 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
JavaScript职责链模式概述
2016/09/17 Javascript
详解js的六大数据类型
2016/12/27 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
Node.js 基础教程之全局对象
2017/08/06 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
详解利用Angular实现多团队模块化SPA开发框架
2017/11/27 Javascript
vue2手机APP项目添加开屏广告或者闪屏广告
2017/11/28 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
Vue中computed与methods的区别详解
2018/03/24 Javascript
jQuery实现列表的增加和删除功能
2018/06/14 jQuery
微信小程序自定义底部弹出框
2020/11/16 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
angularjs自定义过滤器demo示例
2019/08/24 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
详解python的数字类型变量与其方法
2016/11/20 Python
Python3中类、模块、错误与异常、文件的简易教程
2017/11/20 Python
python筛选出两个文件中重复行的方法
2018/05/31 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
Django框架会话技术实例分析【Cookie与Session】
2019/05/24 Python
在jupyter notebook中调用.ipynb文件方式
2020/04/14 Python
18岁生日感言
2014/01/12 职场文书
土地转让协议书
2014/09/27 职场文书
毕业生学校组织意见
2015/06/04 职场文书
Go获取两个时区的时间差
2022/04/20 Golang