百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

带你看好玩的CSS-霓虹灯按钮

zhezhongyun 2025-05-25 16:47 12 浏览

对于前端开发人员来说,css是我们再熟悉不过的朋友的,它就相当于是我们页面的衣服,页面好不好看,就看我们css运用的是否炉火纯青。css学起来简单,但是我们要把它“修炼”到出神入化境界,那这可不是一丁点时间就可以的,需要我们的日积月累,时刻专研。

而今天,就带给大家一个CSS特效-霓虹灯按钮,这也是我看到很不错的效果,带来分享给大家,希望大家喜欢

效果如下:

那好,废话不多说,开始我们的CSS代码。

准备一个HTML标签

Bash
// 这里我们用div标签来模拟button按钮,标签可以随意,a、p、span等都可以
// 通常在开发中使用别的标签来代替button标签,是因为原始的标签样式不好看,
// 我们还得重置样式,而其他标签不带有样式,我们可以更好的控制自己想要的样式,
// 当然,button标签也是可以的,但是如前面所说,原始的样式需要我们重置。
<div class="btn">button</div>

CSS部分的代码

Bash
body {
    margin: 0;
    padding: 0;
    background: #000; // 黑色背景,只为更能突出样式效果
}
// 初始化按钮样式
.btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    font-family: sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    box-sizing: border-box;
    // linear-gradient() 渐变属性,函数用于创建一个表示两种或多种颜色线性渐变的图片
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
}

初始样式为这样:

然后我们给按钮加上动画,代码如下:

.btn:hover {
  	// linear: 动画从开始到结束具有相同的速度。
    // infinite: 无限次播放
    animation: animate 8s linear infinite;
}
@keyframes animate {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 400%;
    }
}

效果就变为下面这样:

最后我们给它加上鼠标移上去的效果,代码如下:

.btn::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 40px;
    opacity: 0;
    transition: .5s;
}
.btn:hover::before {
    filter: blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite;
}

现在这样,就是我们的最终效果了:

就此,我们的霓虹灯的按钮效果就完成了

不足百行,我们就完成了这个效果,以下是我们的CSS的全部代码:

body {
    margin: 0;
    padding: 0;
    background: #000;
}
.btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    color: #fff;
    font-size: 24px;
    font-family: sans-serif;
    text-decoration: none;
    text-transform: uppercase;
    box-sizing: border-box;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 30px;
}
.btn:hover {
    animation: animate 8s linear infinite;
}
@keyframes animate {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 400%;
    }
}
.btn::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    z-index: -1;
    background: linear-gradient(90deg, #03a9f4, #f441a5, #ffeb3b, #03a9f4);
    background-size: 400%;
    border-radius: 40px;
    opacity: 0;
    transition: .5s;
}
.btn:hover::before {
    filter: blur(20px);
    opacity: 1;
    animation: animate 8s linear infinite;
}

相关推荐

APP及网站快速变黑白灰色的方法(2020网站变黑白)

很多人在打开支付宝、淘宝、美团、今日头条、小红书等软件APP的时候,都会发现首页变成了黑白色吧朋友圈里都是大家的纪念、歌颂、缅怀;像父母那代人更是感情真诚热烈,对于他们来说,江老的离开也像是一个时代的...

你了解所有ND滤镜吗?(nd滤镜测评)

风光好伙伴?延时好伴侣?今天给大家分享一下ND滤镜。如有不足,欢迎交流。TheNeutralDensityfilter简称ND减光镜,也叫中密度灰减光滤镜。它的作用是减少进入镜头的光量。根据通光...

滤镜Shader——LookUpTable(slumber滤镜)

LookUpTable(简称LUT,颜色查找表)是一种降低GPU运算量的技术,通过事先将颜色值存储在一张缓存表中当需要运算的时候直接从这张表中索引出对应的颜色值,本质上可看做计算机领域常见的存储空...

【FFmpeg笔记】 从零开始之滤镜(ffmpeg filter_complex)

FFmpeg除了具有强大的封装/解封装、编/解码功能外,还包含了一个非常强大的组建---滤镜avfilter。avfilter组建经常用于进行多媒体的处理与编辑,FFmpeg中包含多种滤镜1.FFm...

原来ND镜应该这么用(nd镜使用技巧)

为什么要使用滤镜?数码时代,相机的功能已经非常强大,后期软件也具有神乎其神的功能,那么滤镜是否还有存在的必要呢?一些色彩滤镜、色温矫正滤镜、特效滤镜(如星光镜、速度镜、柔焦镜等)确实没有太大存在的必要...

CPL偏光镜、ND减光镜使用教程(减光镜偏振镜的区别)

要拍好照片,除了需具备相机基本光圈、快门、ISO…..等操作技能外,还得适时搭配滤镜的使用,如此才为影像带来更丰富的视觉变化,以下我们就以常用的「偏光镜」、「减光镜」应用为例。C-PL偏光镜偏光镜即...

PS 2021版更新强大黑科技,修图师要下岗了?

使用PS把左图修为右图,你猜猜用了几个步骤,用了多长时间?答案是仅仅用了三步,前后用时不到5分钟——套了几个PSCC2021的neuralfilter(神经网络滤镜),只需点点点就完成了包括磨皮...

4块摄影新手必备滤镜(摄影滤镜使用技巧)

刚开始学习摄影的摄友也常会看到「滤镜」(Filter)一词,其实现在有很多不同种类的滤镜,对于新手来说,又应该怎样选择购买必须的滤镜呢?它们又会在什么时间会用上呢?这篇文章会可以给各位一些小提示!A...

Photoshop中英文菜单对照表(ps软件全英文)

Photoshop是Adobe公司旗下最为出名的图像处理软件之一,集图像扫描、编辑修改、图像制作、广告创意,图像输入与输出于一体的图形图像处理软件,深受广大平面设计人员和电脑美术爱好者的喜爱。由于该软...

四块摄影新手必备滤镜(四块摄影新手必备滤镜图片)

刚开始学习摄影的摄友也常会看到「滤镜」(Filter)一词,其实现在有很多不同种类的滤镜,对于新手来说,又应该怎样选择购买必须的滤镜呢?它们又会在什么时间会用上呢?这篇文章会可以给各位一些小提示!A...

为什么说高效创作还得看散热?(为什么说人的美是社会美的核心)

笔记本使用时间长,经常发热发烫?为此,创作者们想尽办法给笔记本降温防热,如清除内部灰尘、在下方加上散热底座等,但这些散热方法并不能有效解决发热,还需要依靠笔记本自身强大的散热系统,才可以使发热得到缓解...

网站都变成灰色,几行代码就搞定了

大家看到网站的内容都变成了灰色,包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢?有人会以为所有的内容都统一换了一个CSS样式,图片也全换成灰色的了,按钮等样式也统一换成了灰色样式。但你想...

什么是ND滤镜?有什么具体用途?(nd滤镜和ndpl)

ND滤镜,全称为中性密度滤镜(NeutralDensityFilter),是一种可以减少光线进入镜头的摄影配件,它可以让摄影师在强光环境下使用更大的光圈或者更长的快门,从而实现一些特殊的摄影效果。...

你好,色彩:滤镜混搭 FilterGrid(色彩滤镜打开对视力有害吗)

手机摄影越来越热门的今天,大家对照片处理App的要求也越来越高了,我的意思是:人类已经不能停止修图了。无论你是追求完美的处女座还是贪新爱玩的双子座,用App处理过后的照片的确更有美感或更有趣(...

CSS超炫加载动画设计、实现与实例讲解

借助CSS提供的animation与transform及filter滤镜等属性,我们可以使用CSS设置出精美的动画效果,进一步可以使用CSS对HTML页面基本元素、图标等进行动画设计,如按钮效果,页面...