效果演示

实现了一个带有发光效果的按钮。按钮在悬停或激活时会产生发光效果，并且按钮上的文字也会随之移动。

Code

<main id="app"><button><span class="text">若冰说CSS</span><span class="shimmer"></span></button></main>

:root {--glow-hue: 222deg;--shadow-hue: 180deg;--spring-easing: linear(0,0.002,0.01 0.9%,0.038 1.8%,0.156,0.312 5.8%,0.789 11.1%,1.015 14.2%,1.096,1.157,1.199,1.224 20.3%,1.231,1.231,1.226,1.214 24.6%,1.176 26.9%,1.057 32.6%,1.007 35.5%,0.984,0.968,0.956,0.949 42%,0.946 44.1%,0.95 46.5%,0.998 57.2%,1.007,1.011 63.3%,1.012 68.3%,0.998 84%,1);--spring-duration: 1.33s;
}
@property --shimmer {syntax: "<angle>";inherits: false;initial-value: 33deg;
}@keyframes shimmer {0% {--shimmer: 0deg;}100% {--shimmer: 360deg;}
}@keyframes shine {0% {opacity: 0;}15% {opacity: 1;}55% {opacity: 1;}100% {opacity: 0;}
}
@keyframes text {0% {background-position: 100% center;}100% {background-position: -100% center;}
}button {color: var(--bg);font-weight: 600;/*     background-image: linear-gradient(90deg, #fcecfe, #fbf6e7, #e6fcf5); */background-image: linear-gradient(315deg,#ffc4ec -10%,#efdbfd 50%,#ffedd6 110%);padding: 0.8em 1.4em;position: relative;isolation: isolate;box-shadow: 0 2px 3px 1px hsl(var(--glow-hue) 50% 20% / 50%),inset 0 -10px 20px -10px hsla(var(--shadow-hue), 10%, 90%, 95%);border-radius: 0.66em;scale: 1;transition: all var(--spring-duration) var(--spring-easing);
}button:hover:not(:active),
button.active {transition-duration: calc(var(--spring-duration) * 0.5);scale: 1.2;box-shadow: 0 4px 8px -2px hsl(var(--glow-hue) 50% 20% / 50%),inset 0 0 0 transparent;
}
button:active {scale: 1.1;transition-duration: calc(var(--spring-duration) * 0.5);
}.shimmer {position: absolute;inset: -40px;border-radius: inherit;mask-image: conic-gradient(from var(--shimmer, 0deg),transparent 0%,transparent 10%,black 36%,black 45%,transparent 50%,transparent 60%,black 85%,black 95%,transparent 100%);mask-size: cover;mix-blend-mode: plus-lighter;animation: shimmer 1s linear infinite both;
}
button:hover .shimmer::before,
button:hover .shimmer::after,
button.active .shimmer::before,
button.active .shimmer::after {opacity: 1;animation: shine 1.2s ease-in 1 forwards;
}
.shimmer::before,
.shimmer::after {transition: all 0.5s ease;opacity: 0;content: "";border-radius: inherit;position: absolute;mix-blend-mode: color;inset: 40px;pointer-events: none;
}
.shimmer::before {box-shadow: 0 0 3px 2px hsl(var(--glow-hue) 20% 95%),0 0 7px 4px hsl(var(--glow-hue) 20% 80%),0 0 13px 4px hsl(var(--glow-hue) 50% 70%),0 0 25px 5px hsl(var(--glow-hue) 100% 70%);z-index: -1;
}.shimmer::after {box-shadow: inset 0 0 0 1px hsl(var(--glow-hue) 70% 95%),inset 0 0 2px 1px hsl(var(--glow-hue) 100% 80%),inset 0 0 5px 2px hsl(var(--glow-hue) 100% 70%);z-index: 2;
}button .text {color: black;font-weight: bold;background-clip: text;background-color: var(--bg);background-image: linear-gradient(120deg,transparent,hsla(var(--glow-hue), 100%, 80%, 0.66) 40%,hsla(var(--glow-hue), 100%, 90%, 0.9) 50%,transparent 52%);background-repeat: no-repeat;background-size: 300% 300%;background-position: center 200%;
}button:hover .text,
button.active .text {animation: text 0.66s ease-in 1 both;
}body,
html {display: flex;height: 100vh;padding: 0;/*     background: radial-gradient(circle at 50% 0%, #9588c7 15%, #c79ed5 75%); */background-image: radial-gradient(circle at 50% 0%,rgb(67, 54, 74) 16.4%,rgb(47, 48, 67) 68.2%,rgb(27, 23, 36) 99.1%);
}
main#app {height: 100vh;width: 100vw;display: flex;align-items: center;justify-content: center;
}