CSS技巧专栏一日一例：18 -纯CSS实现l背景流光溢彩变幻的按钮特效.zip
资源内容介绍
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; 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>