CSS技巧专栏一日一例：18 -纯CSS实现l背景流光溢彩变幻的按钮特效.zip 2.22KB

uuplay0216需要积分:3(1积分=1元)

资源文件列表:

CSS技巧专栏一日一例：18 -纯CSS实现l背景流光溢彩变幻的按钮特效.zip 大约有1个文件

CSS技巧专栏一日一例：18 -纯CSS实现l背景流光溢彩变幻的按钮特效.html 5.25KB

资源介绍:

CSS技巧专栏一日一例：18 -纯CSS实现l背景流光溢彩变幻的按钮特效 --------------------------------------------------------------------------------------------------------- 需要看看效果的，可以移步到我的专栏去看看。文章名与资源名一致。资源特点：代码短小、代码容易阅读、重点注释、方便扩展、样式美观、纯CSS实现。适用人群：前端从业职，新手小白，有网站开发能力对美工有所欠缺的后端工程师。

<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>CSS技巧专栏一日一例：18 -纯CSS实现背景浮光掠影的按钮特效</title> <style> *{ margin:0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } :root{ --main-bg-color: #333; --color:#000; --bg: #000000; --clr-1: #00ccff; --clr-2: #33ff8c; --clr-3: #ffcc00; --clr-4: #e54cff; --clr-5: #ffcc00; --blur: 1.2rem; } body { width:100%; height: auto; background: var(--main-bg-color); } button{ outline: 0; border: none; } .container{ /* 居中 */ position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width:auto; } .base{ position: relative; padding: 1rem 3rem; /* 用 padding 撑起按钮的宽度和高度，并确保了按钮文字水平方向居中 */ font-family: "微软雅黑", sans-serif; font-size: 1.5rem; line-height: 1.5rem; /* 行高和字号大小相等，可以实现按钮文字在按钮内垂直居中 */ font-weight:700; color: var(--color); /* 文字颜色为预定义的前景色 */ cursor: pointer; /* 鼠标移动到按钮上时候的形状：手型 */ user-select: none; /* 让用户不能选择按钮上的文字 */ white-space: nowrap; /* 避免英文单词间的空格导致文字换行 */ border-radius: 2rem; text-decoration: none; text-transform:uppercase; /* 字母自动修正为大写 */ transition: all .5s; /* 按钮响应动画效果的持续时间 */ margin: 1.5rem 2rem; } .base{ overflow: hidden; } .base::before{ content: ""; position: absolute; width: 100%; height:100%; top:0; left:0; border-radius: 2rem; box-shadow: 8px 8px 10px 0 rgba( 66, 46,168, 0.9),-1px -1px 1px 0 rgba(207,189,245, 0.2),inset -1px 0px 0px 0 rgba( 255,255,255, 0.4),inset -1px 0px 10px 0 rgba( 255,255,255, 0.6),inset 1px 1px 0px 0 rgba( 255,255,255, 0.5); z-index: 4; } .aurora{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; mix-blend-mode: darken; pointer-events: none; } .aurora__item { top:-20px; left: -20px; overflow: hidden; position: absolute; width: 150%; height: 150%; border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; filter: blur(var(--blur)); mix-blend-mode: overlay; } .aurora__item:nth-of-type(1) { background-color: var(--clr-1); opacity: 0.5; top: -50%; } .aurora__item:nth-of-type(2) { background-color: var(--clr-3); right: 0; top: 0; } .aurora__item:nth-of-type(3) { background-color: var(--clr-2); left: 1%; bottom: -1%; } .aurora__item:nth-of-type(4) { background-color: var(--clr-4); right: 0; bottom: -50%; } .aurora__item:nth-of-type(1) { animation: aurora-border 6s ease-in-out infinite, aurora-1 12s ease-in-out infinite alternate; } .aurora__item:nth-of-type(2) { animation: aurora-border 6s ease-in-out infinite, aurora-2 12s ease-in-out infinite alternate; } .aurora__item:nth-of-type(3) { animation: aurora-border 6s ease-in-out infinite, aurora-3 8s ease-in-out infinite alternate; } .aurora__item:nth-of-type(4) { animation: aurora-border 6s ease-in-out infinite, aurora-4 24s ease-in-out infinite alternate; } @keyframes aurora-1 { 0% { top: 0; right: 0; } 50% { top: 100%; right: 75%; } 75% { top: 100%; right: 25%; } 100% { top: 0; right: 0; } } @keyframes aurora-2 { 0% { top: -50%; left: 0%; } 60% { top: 100%; left: 75%; } 85% { top: 100%; left: 25%; } 100% { top: -50%; left: 0%; } } @keyframes aurora-3 { 0% { bottom: 0; left: 0; } 40% { bottom: 100%; left: 75%; } 65% { bottom: 40%; left: 50%; } 100% { bottom: 0; left: 0; } } @keyframes aurora-4 { 0% { bottom: -50%; right: 0; } 50% { bottom: 0%; right: 40%; } 90% { bottom: 50%; right: 25%; } 100% { bottom: -50%; right: 0; } } @keyframes aurora-border { 0% { border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; } 25% { border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%; } 50% { border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%; } 75% { border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%; } 100% { border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%; } } .aurora_btn:hover{ box-shadow: 0 0 30px 0 rgba(0, 255, 255, 0.6); } </style> </head> <body> <div class="container"> <button class="base">浮光掠影好看吗 <span class="aurora"> <div class="aurora__item"></div> <div class="aurora__item"></div> <div class="aurora__item"></div> <div class="aurora__item"></div> </span> </button> <button class="base" >浮光掠影 <span class="aurora"> <div class="aurora__item"></div> <div class="aurora__item"></div> <div class="aurora__item"></div> <div class="aurora__item"></div> </span> </button> </div> </body> </html>

标题	大小	时间
刷分、CS、热斗综合版	32.36KB	8月前

单应矩阵的应用，请阅读readme了解详情	4.32MB	8月前
基于J2EE的B2C电子商务系统开发 jsp项目	4.97MB	8月前
远程监控系统软件的实现基于JAVA CS项目 JSP	1.61MB	8月前
sdk-vsoa-v173-x64	679.11KB	8月前

vue3+ts项目框架	2.13MB	8月前
高亮11111111111	67.33KB	8月前
RealEvo-Simulator 下的 AMD64 平台磁盘镜像	4.1MB	8月前