HTML炫彩按钮,炫彩流光按钮 html+css
话不多,先上效果:
简介:
用基础css做一个有一点炫酷的流光按钮,不止按钮,只要是盒子就行。
具体步骤:
1.先定义一个盒子当做按钮,如我就用a标签:
button
2.先给a标签写基础的样式,比如长宽等等…:
.guang{
position: relative;
display: inline-block;
width: 220px;
height: 80px;
color: rgb(255, 255, 255);
line-height: 80px;
font-size: 35px;
font-family: sans-serif;
text-decoration: none;
text-transform: uppercase;
text-align: center;
border-radius: 30px;
background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(201, 214, 13),rgb(226, 20, 233),rgb(16, 172, 219));
background-size: 400%;
z-index: 1;
text-shadow: 0 0 5px white,
0 0 5px white;
}
注意:其中一些属性用处:
text-transform: uppercase; 全部换成大写字母。
background: linear-gradient(…); 线性颜色渐变,可以改成自己要的颜色。
text-shadow: 0 0 5px white,
0 0 5px white;
写两行是为了让字体更亮。
3.鼠标经过盒子产生流光的动画:
.guang:hover{
animation: move 5s linear alternate infinite;
}
@keyframes move{
0%{
background-position: 0%;
}
100%{
background-position: 100%;
}
}
4.定义盒子周围的光晕阴影:
.guang::before{
content: '';
position: absolute;
top: -10px;
left: -10px;
width: 240px;
height: 100px;
background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(243, 169, 10),rgb(226, 20, 233),rgb(16, 172, 219));
background-size: 400%;
opacity: 0;
z-index: -1;
border-radius: 45px;
transition: 0.6s;
}
.guang:hover::before{
filter: blur(15px);
opacity: 1;
animation: move 8s linear alternate infinite;
}
注意:其中一些属性用处:
filter: blur 滤镜,就是让其模糊
完整代码:
Document
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: black;
}
.guang{
position: relative;
display: inline-block;
width: 220px;
height: 80px;
color: rgb(255, 255, 255);
line-height: 80px;
font-size: 35px;
font-family: sans-serif;
text-decoration: none;
text-transform: uppercase;
text-align: center;
border-radius: 30px;
background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(201, 214, 13),rgb(226, 20, 233),rgb(16, 172, 219));
background-size: 400%;
z-index: 1;
text-shadow: 0 0 5px white,
0 0 5px white;
}
.guang:hover{
animation: move 5s linear alternate infinite;
}
@keyframes move{
0%{
background-position: 0%;
}
100%{
background-position: 100%;
}
}
.guang::before{
content: '';
position: absolute;
top: -10px;
left: -10px;
width: 240px;
height: 100px;
background: linear-gradient(90deg,rgb(39, 122, 218),rgb(74, 230, 121),rgb(243, 169, 10),rgb(226, 20, 233),rgb(16, 172, 219));
background-size: 400%;
opacity: 0;
z-index: -1;
border-radius: 45px;
transition: 0.6s;
}
.guang:hover::before{
filter: blur(15px);
opacity: 1;
animation: move 8s linear alternate infinite;
}
button
总结
哈哈~
HTML炫彩按钮,炫彩流光按钮 html+css相关推荐
- CSS3简单特效--animation实现流光按钮
CSS3简单特效–animation实现流光按钮 在学习css3的过程中,发现很多看着炫酷的效果,利用css3的属性能很简单的实现,animation是css3动画效果中常见的属性.下面让我们了解一下 ...
- HTML5+CSS3小实例:炫彩的流光按钮
HTML+CSS3实现炫彩的流光按钮,是不是有点小好看,关键是代码还简单,遇到这样的按钮,我都不忍点击,就一直悬停在上面,静静欣赏它的美. 效果: <!DOCTYPE html> < ...
- 炫彩流光按钮 CSS + HTML
炫彩流光按钮 写在前面 你若要喜爱你自己的价值,你就得给世界创造价值.--歌德 效果图 三个绝美的样例 HTML代码 <div class="box"><butt ...
- 炫彩流光按钮 html+css
话不多,先上效果: 简介: 用基础css做一个有一点炫酷的流光按钮,不止按钮,只要是盒子就行. 具体步骤: 1.先定义一个盒子当做按钮,如我就用a标签: <body><a href= ...
- 炫彩流光文字 html+css
效果: 实现: 1. 定义标签,各自作用看后面解析: <main><h1 class="txt">live on.</h1><h1 cla ...
- uniapp 仿支付宝首页流光按钮效果 流光动画实现
支付宝流光按钮效果 效果动效: 按钮从小到大并出现弹跳效果 流光自左向右滑过 最终实现效果如下图所示: 代码如下: <view class="ceshi">12点开抢 ...
- 【Qt】Qt 开发桌面程序 ( Qt 版本 5.14.2 | 编辑 Qt 桌面按钮控件 | 修改按钮文本 | 为按钮添加点击事件 | 系统调用 | 去掉系统调用命令窗口 )
文章目录 一.添加按钮控件 二.修改按钮文本 三.为按钮添加点击事件 ( 弹出对话框 ) 四.为按钮添加点击事件 ( 打开记事本 ) 五.为按钮添加点击事件 ( 打开计算器 ) 六.去掉系统调用时弹出 ...
- JavaScript点击事件-一个按钮触发另一个按钮
<input type="button" value="Click" id="C" οnclick="Go();" ...
- 按钮配置之自定义按钮使用(一)——JEPLUS软件快速开发平台
为什么80%的码农都做不了架构师?>>> JEPLUS按钮配置之自定义按钮使用(一) 系统开发过程中无论是表单的默认按钮或是列表的默认按钮以及Action的默认按钮有时候并不能 ...
- pyqt按钮关闭窗口_PyQt5按钮单击事件,退出程序
1.注意项: 当使用QPushButton.clicked.connect(lambda:self.信号槽方法).connect方法传参数时,需要加上"lambda:" 2.步骤: ...
最新文章
- 线上学python哪家好-Python线下培训好还是线上培训好
- [工具推荐]制作基于Dash的本地文档方便搜索文档api和内容
- C# Socket与实现
- django language_Python+Django— 入门通关(三)| admin:后台管理界面
- OO Unit 3 JML
- trie树查找前缀串_Trie数据结构(前缀树)
- 万丰科技机器人排名_2020年全国机器人企业数量大排名(省份榜|9月)
- [转载] Scanner和bufferreader读取控制台字符的区别
- 带你看清梦饷集团如何成为上海在线新经济四小龙
- python系统下载-pythonox下载
- python百度百科-python语言概述
- 如何关闭文件服务器的同步,文件服务器同步
- Flex中添加大量组件时内存占用问题
- python 数学画图工具_[python][数据分析] matplotlib 和 pyecharts的绘图工具
- Excel模板免费分享(办公常用、甘特图、员工绩效考核等模板)
- java cropper_cropper 使用总结
- QCustomPlot系列(2)-绘制两条曲线+自动全显+鼠标拖放+rescaleAxes()函数简介
- 微信公众号---收货地址共享接口
- asp.net新闻采集(wyz)
- 计算机键盘能直接接手机吗,手机变成电脑!将键盘和鼠标连接到智能手机的3种方式...
热门文章
- 企业cc邮箱发件服务器设置,C#发送邮件(阿里企业邮箱示例 包括各个类型的服务器及端口配置)...
- 阿正喜欢的演讲系列连载(一):大法官约翰·罗伯茨-我祝你不幸(I Wish You Bad Luck)
- 德国制造和中国制造究竟不同在哪
- N个数选出M个最小或最大值算法
- 高山大学2019级学员名单:但斌、王高飞、胡玮炜等入选
- 汽车营销与保险【3】
- 无法查看别的计算机,雨林木风win7网上邻居看不到别的电脑的解决教程
- STATUS of v$archive_dest的一些情况
- 如何构建OctoberCMS Widget插件
- Docker可视化工具——Portainer全解