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

资源文件列表(大概)

文件名

大小

纯CSS实现的很酷的光圈沿着按钮轮廓旋绕的按钮/纯CSS实现的很酷的光圈沿着按钮轮廓旋绕的按钮.gif

575.81KB

纯CSS实现的很酷的光圈沿着按钮轮廓旋绕的按钮/纯CSS实现的很酷的光圈沿着按钮轮廓旋绕的按钮.html

4.54KB

纯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; }*, *::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; 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)); &:hover { color: #fff; box-shadow: 0 0 5px var(--color),0 0 25px var(--color); &::after, &::before { transition: .3s; background: var(--color); } } &::before { content: ''; position: absolute; z-index: -2; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1500%; height: 3000%; background: #000; background-repeat: no-repeat; background-size: 50% 50%; background-position: 0 0; background-image: conic-gradient(var(--color), var(--color)); animation: rotate 2s linear infinite; } &::after { content: ''; position: absolute; z-index: -1; left: 4px; top: 4px; width: calc(100% - 8px); height: calc(100% - 8px); background: #000; border-radius: 50px; }}.btn1 { filter: hue-rotate(180deg); }.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>

用户评论 (0)

发表评论

您的昵称:

评分

评论内容:

验证码:

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

资源文件列表(大概)

资源内容介绍

用户评论 (0)

发表评论

相关资源

EasyExcel工具包

APM32E103系列单片机工程的创建(仿江科大工程)

基于java控制台酒店管理系统开发框架：eclipse + jdk + java数据库：无

基于javaswing在线考试系统开发框架：eclipse + java + jdk + mysql数据库：mysql