炫彩流光按钮

写在前面

你若要喜爱你自己的价值，你就得给世界创造价值。——歌德

效果图

三个绝美的样例


HTML代码

<div class="box">

        <button class="btn">button</button>

</div>

实现过程

  1. 给按钮添加一个渐变的背景颜色
  2. 将背景的大小放大到原来的若干倍，可以自己设定，这样做是为了让渐变的效果更明显，同时后续实现流光的效果
  3. 给字体设置text-shadow属性，多设置几个可以增加亮度
  4. 当鼠标经过时，实现流光的效果，通过动画改变背景的位置来实现，相当于拖动背景，让按钮显示不一样的颜色
  5. 当鼠标经过时添加光晕的效果，通过伪元素，建一个比原先按钮大一点的盒子，先利用透明度为0隐藏起来，当鼠标经过时，改变透明度为1，同时设置filter属性，添加模糊距离，从而实现光晕的效果

CSS代码

@keyframes move {

    0% {

        background-position: 0%;

    }

    100% {

        background-position: 100%;

    }

}

.btn {

    position: relative;

    width: 300px;

    height: 110px;

    color: white;

    line-height: 80px;

    font-size: 60px;

    font-family: sans-serif;

    text-transform: uppercase;//转化为大写字母

    text-align: center;

    border-radius: 40px;

    background: linear-gradient(90deg,rgb(242, 97, 94),rgb(234, 150, 104),rgb(251, 200, 2),rgb(174, 9, 43),rgb(108, 40, 243),rgb(212, 4, 128),rgb(85, 132, 206));

    background-size: 400%;

    border: none;

    outline: none;

    text-shadow: 0 0 3px white,

                 0 0 3px white,

                 0 0 3px white;//加亮

    z-index: 1;

}

.btn:hover {

    animation: move 2s linear alternate infinite;

}

.btn::before {

    content: '';

    position: absolute;

    top: -5px;

    left: -5px;

    width: 310px;

    height: 120px;

    background: linear-gradient(90deg,rgb(242, 97, 94),rgb(234, 150, 104),rgb(251, 200, 2),rgb(174, 9, 43),rgb(108, 40, 243),rgb(212, 4, 128),rgb(85, 132, 206));

    background-size: 400%;

    opacity: 0;

    border-radius: 45px;

    transition: .6s;

    z-index: -1;

}

.btn:hover::before {

    filter: blur(10px);

    opacity: 1;

    animation: move 2s linear alternate infinite;

}

完整代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>炫彩流光</title>

    <style>

        @keyframes move {

            0% {

                background-position: 0%;

            }

            100% {

                background-position: 100%;

            }

        }

        * {

            margin: 0;

            padding: 0;

        }

        body {

            background-color: black;

        }

        .box {

            width: 400px;

            height: 400px;

            margin: 100px auto;

        }

        .btn {

            position: relative;

            width: 300px;

            height: 110px;

            color: white;

            line-height: 80px;

            font-size: 60px;

            font-family: sans-serif;

            text-transform: uppercase;//转为大写字母

            text-align: center;

            border-radius: 40px;

            background: linear-gradient(90deg,rgb(242, 97, 94),rgb(234, 150, 104),rgb(251, 200, 2),rgb(174, 9, 43),rgb(108, 40, 243),rgb(212, 4, 128),rgb(85, 132, 206));

            background-size: 400%;

            border: none;

            outline: none;

            text-shadow: 0 0 3px white,

                         0 0 3px white,

                         0 0 3px white;

            z-index: 1;

        }

        .btn:hover {

            animation: move 2s linear alternate infinite;

        }

        .btn::before {

            content: '';

            position: absolute;

            top: -5px;

            left: -5px;

            width: 310px;

            height: 120px;

            background: linear-gradient(90deg,rgb(242, 97, 94),rgb(234, 150, 104),rgb(251, 200, 2),rgb(174, 9, 43),rgb(108, 40, 243),rgb(212, 4, 128),rgb(85, 132, 206));

            background-size: 400%;

            opacity: 0;

            border-radius: 45px;

            transition: .6s;

            z-index: -1;

        }

        .btn:hover::before {

            filter: blur(10px);

            opacity: 1;

            animation: move 2s linear alternate infinite;

        }

    </style>

</head>

<body>

    <div class="box">

        <button class="btn">button</button>

    </div>

</body>

</html>

End

以上就是炫彩流光按钮的全部内容了

先相信自己，然后别人才会相信你。——罗曼·罗兰

炫彩流光按钮 CSS + HTML的更多相关文章

  1. Canvas跟随鼠标炫彩小球

    跟随鼠标炫彩小球 canvas没有让我失望,真的很有意思 实现效果 超级炫酷 实现原理 创建小球 给小球添加随机颜色,随机半径 鼠标移动通过实例化,新增小球 通过调用给原型新增的方法,来实现小球的动画 ...

  2. js 生成随机炫彩背景

    在浏览 https://ghost.org/xxxx/ 时. 可以使用 background-size: cover; 加上很小的像素图,放大后实现炫彩背景效果. 使用 js canvas 随机生成小 ...

  3. HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  4. 超多经典 canvas 实例，动态离子背景、移动炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等等等

    超多经典 canvas 实例 普及:<canvas> 元素用于在网页上绘制图形.这是一个图形容器,您可以控制其每一像素,必须使用脚本来绘制图形. 注意:IE 8 以及更早的版本不支持 &l ...

  5. [js高手之路]html5 canvas动画教程 - 跟着鼠标移动消失的一堆炫彩小球

    综合利用前面所学,实现一个绚丽的小球动画,这个实例用到的知识点,在我的博客全部都有,可以去这里查看所有的canvas教程 <head> <meta charset='utf-8' / ...

  6. [Micropython]发光二极管制作炫彩跑马灯

       先甩锅 做完后才发现最后一个灯坏了,就坏了一个灯也不好意思去找淘宝店家,大家视频凑合着看把.不过并不影响实验效果.因为这个发光二极管白天不是很明显 晚上炫彩效果就能出来了.本次实验用的是8个灯珠 ...

  7. java-js知识库之二——canvas绘制炫彩气泡

    现在使用canvas绘制气泡,虽说很多人都已经实现过了,可能方法都大同小异,但自己写和看别人写完全是两码事,自己会写的才是自己的,话不多说,直接上代码. 先来一张效果图: 现在上代码,代码有详细的注释 ...

  8. 按钮CSS样式

      CreateTime--2017年5月5日11:23:18Author:Marydon 按钮CSS样式 实现效果: <input type="button" onclic ...

  9. legend---四、菜鸟教程css3里面有教你炫酷的按钮怎么做

    legend---四.菜鸟教程css3里面有教你炫酷的按钮怎么做 一.总结 一句话总结:想学,总是有很多资料的 1. 自动居中是 margin:100px 0px;么? 自动居中是margin:100 ...

随机推荐

  1. （九）VMware Harbor 项目管理-上传/下载镜像

    VMware Harbor项目管理 Harbor中的项目包含应用程序的所有存储库. Harbor有两类项目: 公共:所有用户都拥有公共项目的读取权限,您可以方便地以这种方式与其他人共享一些存储库. 私 ...

  2. ACCESS常见错误场景

    ACCESS常见错误场景 今天用access时发现好多报错的地方,emmm,比MySQL麻烦好多,有些甚至还要自己去配置环境 不吐槽了,进入正题: 报错场景一:您尝试执行不包含指定聚合函数的查询 第一 ...

  3. 程序员的开源月刊《HelloGitHub》第61期

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 内容包括:有趣.入门级的开源项目.开源书籍.实战项目.企业级项目等,让你在短时间内感 ...

  4. Jmeter(四十三) - 从入门到精通高级篇 - Jmeter之IP伪装和欺骗（详解教程）

    1.简介 我们从小接受的教育就是不要撒谎,要做一个诚实的孩子,但是在现实生活中有时候说一个善意的谎言也不是可以的.这里由于服务器各种安全机制的限制和校验,因此我们不得不欺骗一下服务器,今天宏哥就给大家 ...

  5. WebPack系列--开启HappyPack之后，再将项目打包速度缩短5秒

    效果展示 打包时间:缩短了 26.296s-20.586s=5.71s 先看两组测试数据,第一组是没有使用DllPlugin的打包测试数据,测量三次取平均值是26.296s(25.72+25.56+2 ...

  6. 到底什么才叫SEO

    昨天去面试,公司的老板,问了我几个SEO的问题.SEO是什么?长尾词与关键词的区别?你用哪些SEO工具? SEO就是为了将关键词做上好的位置展示给用户.难道不是吗? 这些问题,我都答了一下. 然后他问 ...

  7. 【JVM】JVM中的垃圾收集器

    垃圾收集器组合 Serial+Serial Old Serial+CMS ParNew+CMS ParNew+Serial Old Paralle Scavenge + Serial Old Para ...

  8. 数据库函数-常用的MySQL函数

    1.date_sub() 时间的加减 备注:record 为datetime类型 select record_time as date, order_area as orderArea, order_ ...

  9. vue的快速入门【IDEA版本】

    和vscode相比,使用IDEA进行前端开发并没有那么容易,需要先进行配置 . 安装vue插件,重启idea 鼠标右键添加vue component 点击 file 打开设置 settings,展开 ...

  10. JVM虚拟机 类加载过程与类加载器

    目录 前言 类的生命周期 类加载过程 加载 连接 验证 准备 解析 初始化 类加载器 三大类加载器 双亲委派模型 概念 为什么要使用双亲委派模型 源码分析 反双亲委派模型 参考 前言 类装载器子系统是 ...