炫彩流光按钮

写在前面

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

效果图

三个绝美的样例


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. IDEA xml 注解快捷键

    注释:CTRL + SHIFT + / 撤销注释:CTRL + SHIFT + \

  2. element UI el-autocomplete 带输入建议的输入框

    项目需求:需要用户在输入框中输入公司 全名    但是为了避免用户输入不全   需要做一个带输入建议的输入框 参考:https://www.jianshu.com/p/de922caf337c

  3. jira 改变issue状态触发jenkins构建/发布

    目录 jira中issue状态的改变触发Jenkins构建 jira中定制新的workflow,作为jenkins发布使用流程 大家可以参考我的这个workflow 设置workflow 使用Tran ...

  4. css单位介绍em ex ch rem vw vh vm cm mm in pt pc px

    长度单位主要有以下几种em ex ch rem vw vh vm cm mm in pt pc px %,大概可以分为几种"绝对单位"和"相对单位"和" ...

  5. POJ 2752 同一个串的前后串

    题解东北赛回来再补 #include<stdio.h> #include<string.h> int next[500000]; int ans[500000]; char s ...

  6. PAT 乙级 -- 1012 -- 数字分类

    题目简介 给定一系列正整数,请按要求对数字进行分类,并输出以下5个数字: A1 = 能被5整除的数字中所有偶数的和: A2 = 将被5除后余1的数字按给出顺序进行交错求和,即计算n1-n2+n3-n4 ...

  7. JVM虚拟机-了解Java堆中对象分配、布局和访问的全过程

    目录 前言 对象的创建 类加载检查 分配内存 内存空间分配方式 指针碰撞 空闲列表 并发时的内存分配 同步处理:CAS 本地线程分配缓冲:TLAB 初始化零值 设置对象头 执行 init 方法 对象的 ...

  8. 【技巧】使用xshell和xftp连接centos连接配置

    说明:xshell用来执行指令,xftp用来上传和下载文件. ① 这是xshell连接属性: ②.这是xftp连接属性 附件:这里给个xshelll和xftp的免安装的破解版本地址.侵删. 度娘链接: ...

  9. Spring Security 入门（基本使用）

    Spring Security 入门(基本使用) 这几天看了下b站关于 spring security 的学习视频,不得不说 spring security 有点复杂,脑袋有点懵懵的,在此整理下学习内 ...

  10. 交叉编译参数--build、host和target的区别

    build.host和target 在交叉编译中比较 常见 的一些参数就是build.host和target了,正确的理解这三者的含义对于交叉编译是非常重要的,下面就此进行解释 --build=编译该 ...