炫彩流光按钮

写在前面

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

效果图

三个绝美的样例


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. Printer Queue UVA - 12100

    The only printer in the computer science students' union is experiencing an extremely heavy workload ...

  2. php的call_user_func_array()使用场景

    1..动态调用普通函数时,比如参数和调用方法名称不确定的时候很好用 function sayEnglish($fName, $content) { echo 'I am ' . $content; } ...

  3. 缓冲区溢出分析第04课:ShellCode的编写

    前言 ShellCode究竟是什么呢,其实它就是一些编译好的机器码,将这些机器码作为数据输入,然后通过我们之前所讲的方式来执行ShellCode,这就是缓冲区溢出利用的基本原理.那么下面我们就来编写S ...

  4. CVE-2012-0774:Adobe Reader TrueType 字体整数溢出漏洞调试分析

    0x01 TrueType 字体 TTF 字体是 Apple 和 Microsoft 两家公司共同推出的字体格式,现在已经广泛的运用于 Windows 操作系统,其中 PDF 文档也可以嵌入 TTF ...

  5. 基于 RTF specification v1.7 的 RTF 文件解析及 OLE 对象提取(使用 Python 开发)

    0x01 Office RTF 文件介绍 RTF 文件也称富文本格式(Rich Text Format, 一般简称为 RTF),意为多文本格式是由微软公司开发的跨平台文档格式.大多数的文字处理软件都能 ...

  6. <JVM上篇:内存与垃圾回收篇>04-虚拟机栈

    笔记来源:尚硅谷JVM全套教程,百万播放,全网巅峰(宋红康详解java虚拟机) 同步更新:https://gitee.com/vectorx/NOTE_JVM https://codechina.cs ...

  7. Linux安装与使用FTP服务-vsftpd

    简介 vsftpd 是"very secure FTP daemon"的缩写,安全性是它的一个最大的特点.vsftpd 是一个 UNIX 类操作系统上运行的服务器的名字,它可以运行 ...

  8. python之xlwt

    python写excel----xlwt 写excel的拿点不在构造一个workbook的本身,二是填充的数据,不过这不在范围内,在写excel的操作中也有棘手的问题, 比如写入合并的单元格就是比较麻 ...

  9. VS“无法查找或打开PDB文件”解决方法

    ``#运行时报错提示 "温度柱状图.exe"(Win32): 已加载"C:\Windows\SysWOW64\rpcrt4.dll".无法查找或打开 PDB 文 ...

  10. Jenkins 基础篇 - 任务分类

    从前面的小节中我们看到在创建 Jenkins 任务的时候有好几种类型,如果你专门安装了 Maven 相关插件,可能还会有一个[构建一个 maven 项目]的任务类型,那这些任务类型究竟有何区别,以及我 ...