html按钮线性炫光,6分钟实现CSS炫光倒影按钮 html+css
话不多,先看效果:
回归老本行,继续分享简单有趣的CSS创意特效,放松放松心情~
实现过程(完整源码在最后):
1 老样子,定义基本样式:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'fangsong';
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(0, 0, 0);
}
font-family: ‘fangsong’; 仿宋字体。
display: flex;
align-items: center;
justify-content: center; flex布局,让按钮在屏幕居中。
2.定义基本标签:
aurora
aurora
aurora
3个a标签就对应3个按钮,每个按钮里4个span就是环绕按钮的4条边。
且都有个公共的选择器 .item 和 只属于自己的选择器。
3.定义每个按钮的基本样式:
.item{
position: relative;
margin: 50px;
width: 300px;
height: 80px;
text-align: center;
line-height: 80px;
text-transform: uppercase;
text-decoration: none;
font-size: 35px;
letter-spacing: 5px;
color: aqua;
overflow: hidden;
-webkit-box-reflect: below 1px linear-gradient( transparent,rgba(6, 133, 133,0.3));
}
text-align: center;文字对齐方式。
line-height: 80px; 字行高。
text-transform: uppercase; 字母为大写。
text-decoration: none; 去掉a标签默认下划线。
letter-spacing: 5px; 每个字符间的距离。
overflow: hidden;溢出隐藏。
-webkit-box-reflect: below 1px linear-gradient( transparent,rgba(6, 133, 133,0.3)); 这个属性能实现倒影效果。
4. 鼠标经过按钮样式改变:
.item:hover{
background-color: aqua;
box-shadow:0 0 5px aqua,
0 0 75px aqua,
0 0 155px aqua;
color: black;
}
box-shadow:0 0 5px aqua,
0 0 75px aqua,
0 0 155px aqua; 阴影,写多行可以叠加更亮。
5.设置环绕按钮的4根线上面那条的样式:
.item span:nth-of-type(1){
position: absolute;
left: -100%;
width: 100%;
height: 3px;
background-image: linear-gradient(to left,aqua ,transparent);
animation: shang 1s linear infinite;
}
@keyframes shang{
0%{
left:-100%;
}
50%,100%{
left:100%;
}
}
position: absolute;
left: -100%; 定位在对应位置。
background-image: linear-gradient(to left,aqua ,transparent); 线性渐变颜色。
animation: shang 1s linear infinite; 动画属性,让它动起来。
5.以此类推,设置环绕按钮的其它3根样式:
.item span:nth-of-type(2){
position: absolute;
top: -100%;
right: 0;
width: 3px;
height: 100%;
background-image: linear-gradient(to top,aqua ,transparent);
animation: you 1s linear infinite;
animation-delay: 0.25s;
}
@keyframes you{
0%{
top:-100%;
}
50%,100%{
top:100%;
}
}
.item span:nth-of-type(3){
position: absolute;
right: -100%;
bottom: 0;
width: 100%;
height: 3px;
background-image: linear-gradient(to right,aqua ,transparent);
animation: xia 1s linear infinite;
animation-delay: 0.5s;
}
@keyframes xia{
0%{
right:-100%;
}
50%,100%{
right:100%;
}
}
.item span:nth-of-type(4){
position: absolute;
bottom: -100%;
left: 0;
width: 3px;
height: 100%;
background-image: linear-gradient(to bottom,aqua ,transparent);
animation: zuo 1s linear infinite;
animation-delay: 0.75s;
}
@keyframes zuo{
0%{
bottom:-100%;
}
50%,100%{
bottom:100%;
}
}
animation-delay: 0.75s; 动画延迟执行。每条线对应延迟一段时间,形成时间差,形成环绕效果。
6.给第一,第三个按钮设置其它颜色:
.item1{
filter: hue-rotate(100deg);
}
.item3{
filter: hue-rotate(250deg);
}
filter: hue-rotate(100deg); 用色相旋转,这样不管背景还是阴影颜色都变了。
完整代码:
Document
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'fangsong';
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: rgb(0, 0, 0);
}
.item{
position: relative;
margin: 50px;
width: 300px;
height: 80px;
text-align: center;
line-height: 80px;
text-transform: uppercase;
text-decoration: none;
font-size: 35px;
letter-spacing: 5px;
color: aqua;
overflow: hidden;
-webkit-box-reflect: below 1px linear-gradient( transparent,rgba(6, 133, 133,0.3));
}
.item:hover{
background-color: aqua;
box-shadow:0 0 5px aqua,
0 0 75px aqua,
0 0 155px aqua;
color: black;
}
.item span:nth-of-type(1){
position: absolute;
left: -100%;
width: 100%;
height: 3px;
background-image: linear-gradient(to left,aqua ,transparent);
animation: shang 1s linear infinite;
}
@keyframes shang{
0%{
left:-100%;
}
50%,100%{
left:100%;
}
}
.item span:nth-of-type(2){
position: absolute;
top: -100%;
right: 0;
width: 3px;
height: 100%;
background-image: linear-gradient(to top,aqua ,transparent);
animation: you 1s linear infinite;
animation-delay: 0.25s;
}
@keyframes you{
0%{
top:-100%;
}
50%,100%{
top:100%;
}
}
.item span:nth-of-type(3){
position: absolute;
right: -100%;
bottom: 0;
width: 100%;
height: 3px;
background-image: linear-gradient(to right,aqua ,transparent);
animation: xia 1s linear infinite;
animation-delay: 0.5s;
}
@keyframes xia{
0%{
right:-100%;
}
50%,100%{
right:100%;
}
}
.item span:nth-of-type(4){
position: absolute;
bottom: -100%;
left: 0;
width: 3px;
height: 100%;
background-image: linear-gradient(to bottom,aqua ,transparent);
animation: zuo 1s linear infinite;
animation-delay: 0.75s;
}
@keyframes zuo{
0%{
bottom:-100%;
}
50%,100%{
bottom:100%;
}
}
.item1{
filter: hue-rotate(100deg);
}
.item3{
filter: hue-rotate(250deg);
}
aurora
aurora
aurora
总结:
html按钮线性炫光,6分钟实现CSS炫光倒影按钮 html+css相关推荐
- html怎么让导航栏平均分布,CSS 怎么让按钮平均分布
CSS 怎么让按钮平均分布 等分布局是指子元素平均分配父元素宽度的布局方式, 本文将介绍实现等分布局的 4 种方式 一, float 缺点: 结构和样式存在耦合性, IE7 - 浏览器下对宽度百分比取 ...
- 从Chrome中的css自定义样式按钮中删除蓝色边框
本文翻译自:Remove blue border from css custom-styled button in Chrome I'm working on a web page, and I wa ...
- html按钮按下效果_【CSS小分享】纯CSS实现一个水波纹效果按钮
前言 如果大家有用过Material Design风格的UI库,那么一定对水波纹按钮很熟悉,我们这次就是使用纯CSS实现一个最简单的水波纹效果按钮,先上成品: 原理 在按钮中放置一个默认隐藏径向渐变的 ...
- php3d按钮,CSS实现3D按钮效果
这次给大家带来CSS实现3D按钮效果,CSS实现3D按钮效果的注意事项有哪些,下面就是实战案例,一起来看一下. css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改bo ...
- Bootstrap全局css样式_按钮
链接被作为按钮使用时的注意事项 如果 <a> 元素被作为按钮使用 -- 并用于在当前页面触发某些功能 -- 而不是用于链接其他页面或链接 当前页面中的其他部分,那么,务必为其设置 role ...
- css笔记——css 实现自定义按钮
css实现自定义按钮的样式实际上很早就有了,只是会用的人不是很多,里面涉及到了最基础的css写法,在火狐中按钮还是会显示出来,这时需要将i标签的背景设置为白色,同时z-index设置比input高一些 ...
- 设置html按钮点击事件无效果,css怎么设置按钮不能点击?
css怎么设置按钮不能点击?下面本篇文章就来给大家介绍一下使用CSS设置按钮不能点击的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 想要按钮不能点击可以通过设置按钮点击事件失 ...
- 纯CSS自定义button按钮的点击特效
纯css自定义button按钮的点击特效,实现背景变化 效果图如下: 代码如下: <!DOCTYPE html> <html> <head><meta cha ...
- HTML+CSS实现带按钮的弹出框
带按钮的弹出框 HTML部分 CSS样式 JS部分 效果图 补充知识:关于rgba属性 HTML部分 <button id="showPopup" onclick=" ...
- 遥控器页面html,CSS模仿遥控器按钮
注:本demo在小程序环境中测试,其他h5,pc网页通用,只需将小程序单位和标签名改成通用的即可,并按照自己的需求做适配即可. 大体思路:四个相同的正方形田字形布局,配合旋转属性即可. html结构 ...
最新文章
- 2022-2028年中国氮肥行业投资分析及前景预测报告
- 1.5 特征缩放-机器学习笔记-斯坦福吴恩达教授
- 6月Top 20榜单出炉啦! 万万没想到区块链大佬竟在忙这个...
- wxWidgets:进程间通信
- OpenGL创建hello Window窗口
- Python中的ThreadLocal变量
- VS2012 +PTVS配置
- Macbook pro wifi连接无线路由不稳定掉线的解决办法
- linux python2.7 mssqlserver_连接到linux上的MSSQL Server 2008
- .net链接带密码的ACCESS数据库
- DIV+CSS如何让文字垂直居中
- github上写简历
- Linux下的/etc/ssh/ssh_config文件配置详解SSH配置文件相关参数详细说明
- 【软件工程】软件需求说明书
- [English]英语积累本
- 自动祝福程序(定时发送消息)
- 论文笔记-Optimized flocking of autonomous drones in confined environments
- 小米打印机显示服务器错误是怎么回事,小米打印机出现不再接受此打印加密是什么意思?...
- 理工科er怎么发一作SCI
- 在linux下安装aapt/apktool
热门文章
- 计算机组成原理中的“上溢”和“下溢”分别的定义是什么?
- Http请求之优雅的RestTemplate
- 使用注解开发SpringMVC详细配置教程
- 硬件专业化和软件映射的敏捷框架
- 各种经典透镜投影模型
- 前端的单页面模式和多页面模式
- [JavaScript] JavaScript 数组挖掘,不只是讲数组哟
- 直接法 matlab,解线性方程组直接方法matlab用法.doc
- postgreSQL外键引用查询 查询外键被那些表占用
- avpicture_fill的实现