首页
友链
壁纸
留言
今日热榜
更多
关于
时光
推荐
精品流量卡
Search
1
都二十多年了,你的梦为什么还没碎!
57,062 阅读
2
2022年5个好用的 BT/ 磁力链接下载工具推荐 |Windows 、安卓系统
37,217 阅读
3
nps内网穿透实现外网访问树莓派
32,390 阅读
4
实践利用宝塔建emlog个人博客-超详细【原创】
26,119 阅读
5
Typecho-Joe-Theme主题帮助文档
24,549 阅读
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
登录
Search
标签搜索
PHP
HTML
API
Javascript
源码
JS
Vue
Github
CloudFlare
接口
函数
SQL
ASP.NET
MVC
EF
T4模板
后台管理
CDN
微信小程序
MAC
韩小韩
累计撰写
261
篇文章
累计收到
1,300
条评论
首页
栏目
闲杂乱码
Python
网站源码
微信小程序
娱乐分享
Is相册
软件工具
页面
友链
壁纸
留言
今日热榜
关于
时光
推荐
精品流量卡
搜索到
1
篇与
按钮
的结果
2021-05-27
6分钟实现CSS炫光倒影按钮
{message type="info" content="分享简单有趣的CSS创意特效,放松放松心情~"/}定义基本样式 *{ 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); }{callout color="#f0ad4e"}font-family: 'fangsong'; 仿宋字体。 display: flex; align-items: center; justify-content: center; flex布局,让按钮在屏幕居中。{/callout}定义基本标签 <a href="#" class="item item1"> aurora <span></span> <span></span> <span></span> <span></span> </a> <a href="#" class="item item2"> aurora <span></span> <span></span> <span></span> <span></span> </a> <a href="#" class="item item3"> aurora <span></span> <span></span> <span></span> <span></span> </a>{callout color="#f0ad4e"}3个a标签就对应3个按钮,每个按钮里4个span就是环绕按钮的4条边。 且都有个公共的选择器 .item 和 只属于自己的选择器。{/callout}定义每个按钮的基本样式 .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)); }{callout color="#f0ad4e"}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)); 这个属性能实现倒影效果。{/callout}鼠标经过按钮样式改变 .item:hover{ background-color: aqua; box-shadow:0 0 5px aqua, 0 0 75px aqua, 0 0 155px aqua; color: black; }{callout color="#f0ad4e"}box-shadow:0 0 5px aqua, 0 0 75px aqua, 0 0 155px aqua; 阴影,写多行可以叠加更亮。{/callout}设置环绕按钮的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%; } }{callout color="#f0ad4e"}position: absolute;left: -100%; 定位在对应位置。background-image: linear-gradient(to left,aqua ,transparent); 线性渐变颜色。animation: shang 1s linear infinite; 动画属性,让它动起来。{/callout}以此类推,设置环绕按钮的其它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%; } }{callout color="#f0ad4e"}animation-delay: 0.75s; 动画延迟执行。每条线对应延迟一段时间,形成时间差,形成环绕效果。{/callout}完整代码<!DOCTYPE html> <html lang="zh-CN"> <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>Document</title> <style> *{ 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); } </style> </head> <body> <a href="#" class="item item1"> aurora <span></span> <span></span> <span></span> <span></span> </a> <a href="#" class="item item2"> aurora <span></span> <span></span> <span></span> <span></span> </a> <a href="#" class="item item3"> aurora <span></span> <span></span> <span></span> <span></span> </a> </body> </html>{callout color="#604def"}转自 ㅤㅤㅤ6分钟实现CSS炫光倒影按钮 - 掘金ㅤㅤㅤ作者:北极光之夜ㅤㅤㅤ地址:https://juejin.cn/post/6966482130020859912{/callout}
2021年05月27日
973 阅读
0 评论
0 点赞