ZIP纯CSS实现的很酷的光圈沿着按钮轮廓旋绕的按钮.zip 539.7KB

uuplay0216

资源文件列表:

纯CSS实现的很酷的光圈沿着按钮轮廓旋绕的按钮.zip 大约有3个文件
  1. 纯CSS实现的很酷的光圈沿着按钮轮廓旋绕的按钮/纯CSS实现的很酷的光圈沿着按钮轮廓旋绕的按钮.gif 575.81KB
  2. 纯CSS实现的很酷的光圈沿着按钮轮廓旋绕的按钮/纯CSS实现的很酷的光圈沿着按钮轮廓旋绕的按钮.html 4.54KB
  3. 纯CSS实现的很酷的光圈沿着按钮轮廓旋绕的按钮/

资源介绍:

资源介绍：这段代码通过css伪类::before 和 after 实现了一个光条环绕按钮边框旋转的效果，非常的酷炫。纯css实现的按钮动态效果，代码逻辑清晰。 资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、不使用js，不使用JQ框架。 适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。 提示：------------------------------------------------------------------------------------------------------------ 文件夹里包含预览图，源码有注释。没有任何广告和病毒，可放心下载，学习，使用。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="jquery.min.js"></script> <title>纯CSS实现的很酷的button效果，光圈沿着按钮轮廓旋绕</title> <style type="text/css"> * { margin: 0px;padding: 0px; } html,body { height: 100%; width: 100%; background: #000} .wrap{ position: fixed; display: flex; width: 70%; height: auto; padding:0px; left: 50%; top: 50%; transform: translate(-50%, -50%); justify-content: center; align-items: center; } :root { --color: #0ebeff; /* 定义 --color颜色,这里是个蓝色 */ } *, *::before, *::after { box-sizing: border-box; } @keyframes rotate { 100% { transform: translate(-50%, -50%) rotate(1turn); } } .btn { position: relative; float:left; z-index: 0; /* 按钮顶层 */ width: auto; /* 宽度自适应，以容纳更多的文字 */ height: 60px; line-height: 60px; /* line-height 与容器 height 相等，使文字垂直居中 */ color: var(--color); /* 设置文字颜色，通过var函数获取--color的值 */ font-size: 24px; border-radius: 50px; text-align: center; margin: 15px; overflow: hidden; padding: 0px 40px; cursor: pointer; transition: .3s; white-space: nowrap; /* 按钮上的文字可不能换行，尤其是中英文混用时 */ -webkit-box-reflect: below 20px linear-gradient(transparent, rgba(0, 0, 0, .2)); /* 实现本体的倒影，-box-reflect: below 20px，表示与本体之间的偏移量为20px，数值越小，越靠近。 linear-gradient(transparent, rgba(0, 0, 0, .2)); 定义倒影的效果为：线性渐变，从本体逐渐过渡到黑色。本体的起始透明度为20%。可以通过修改这一行参数调整倒影效果 */ &:hover { color: #fff; box-shadow: 0 0 5px var(--color),0 0 25px var(--color); /* 外发光效果 */ &::after, &::before { transition: .3s; background: var(--color); /* 填充按钮颜色 */ } } &::before { /* 通过伪类的背景色填充实现边框效果, 先用before伪类设置颜色填充，如果背景色也是渐变色，那就可以实现一个渐变的边框了 */ content: ''; position: absolute; z-index: -2; /* 按钮底层 */ left: 50%; top: 50%; transform: translate(-50%, -50%); /* left:50%,top:50%,translate(-50%, -50%); 确保底层与顶层同心居中 */ width: 1500%; /* 扩大填充范围 ，确保当按钮的宽度高度过大时背景色全覆盖，*/ height: 3000%; background: #000; background-repeat: no-repeat; background-size: 50% 50%; /* 背景填充色同时缩放为原来的50% background-size: length|percentage|cover|contain; */ background-position: 0 0; /* 设置背景填充的起始位置 */ background-image: conic-gradient(var(--color), var(--color)); /* conic-gradient: 设置背景颜色的渐变：围绕中心进行圆锥形渐变，这样就形成了看似一条线沿着border旋转的效果 */ animation: rotate 2s linear infinite; /* 让动画匀速动起来，时间周期为2秒 */ } &::after { /* 在before的上面，遮挡一层黑色，通过层叠遮挡中间部分，四周露出的部分模拟边框效果 */ content: ''; position: absolute; z-index: -1; /* 按钮中间层 */ left: 4px; top: 4px; width: calc(100% - 8px); /* 计算填充宽度，因为要实现填充的黑色背景遮挡住before的背景色，又要模拟出border的效果，所以要减去宽度值等于要模拟的border的宽度值的2倍。 */ height: calc(100% - 8px); /* 填充高度 */ background: #000; border-radius: 50px; } } .btn1 { filter: hue-rotate(180deg); /* hue-rotate(deg): 给图像应用色相旋转,改变填充颜色。若值未设置，默认值是0deg,图像无变化。一圈：360deg */ } .btn2 { filter: hue-rotate(270deg); } .btn3 { filter: hue-rotate(90deg); } </style> </head> <body> <div class="wrap"> <div class="btn">我是初始设定的蓝色button</div> <div class="btn btn1">我是颜色旋转色相180度的按钮</div> <div class="btn btn2">270度的我</div> <div class="btn btn3">我只转了90度</div> </div> </body> </html> </script>
100+评论
captcha
    相关资源
    类型标题大小时间
    ZIPEasyExcel工具包135.99KB10月前
    ZIPAPM32E103系列单片机工程的创建(仿江科大工程)219.31KB10月前
    ZIP基于java控制台酒店管理系统开发框架：eclipse + jdk + java数据库：无16.16MB10月前
    ZIP基于javaswing在线考试系统开发框架：eclipse + java + jdk + mysql数据库：mysql25.31MB10月前
    ZIP合宙air001硬件spi驱动7针oled屏幕8.18MB10月前
    ZIP基于go微服务架构的直播平台服务.zip92.8MB10月前
    ZIPTCP/IP网络编程，MFC多功能聊天室8.7MB10月前
    ZIP班迪录屏1.9.zip6.92MB10月前