<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>有点小酷的光影卡片特效</title>
<style>
@charset "UTF-8";
@property --hue {
syntax: '<number>';
inherits: true;
initial-value: 0;
}
@property --rotate {
syntax: '<number>';
inherits: true;
initial-value: 0;
}
@property --bg-y {
syntax: '<number>';
inherits: true;
initial-value: 0;
}
@property --bg-x {
syntax: '<number>';
inherits: true;
initial-value: 0;
}
@property --glow-translate-y {
syntax: '<number>';
inherits: true;
initial-value: 0;
}
@property --bg-size {
syntax: '<number>';
inherits: true;
initial-value: 0;
}
@property --glow-opacity {
syntax: '<number>';
inherits: true;
initial-value: 0;
}
@property --glow-blur {
syntax: '<number>';
inherits: true;
initial-value: 0;
}
@property --glow-scale {
syntax: '<number>';
inherits: true;
initial-value: 2;
}
@property --glow-radius {
syntax: '<number>';
inherits: true;
initial-value: 2;
}
@property --white-shadow {
syntax: '<number>';
inherits: true;
initial-value: 0;
}
:root {
--debug: 0;
--supported: 0;
--not-supported: 0;
--card-color: hsl(260deg 100% 3%);
--text-color: hsl(260deg 10% 55%);
--card-radius: 3.6vw;
--card-width: 35vw;
--border-width: 3px;
--bg-size: 1;
--hue: 0;
--hue-speed: 1;
--rotate: 0;
--animation-speed: 4s;
--interaction-speed: 0.55s;
--glow-scale: 1.5;
--scale-factor: 1;
--glow-blur: 6;
--glow-opacity: 1;
--glow-radius: 100;
--glow-rotate-unit: 1deg;
}
body::before,
body::after {
content: 'CSS.registerProperty is supported ✅';
position: absolute;
display: block;
top: 8px;
left: 0;
right: 0;
margin: auto;
width: calc(100% - 160px);
max-width: 380px;
height: auto;
padding: 8px;
border-radius: 8px;
background: #48b93c;
color: white;
text-align: center;
font-family: sans-serif;
z-index: var(--supported, 0);
opacity: var(--supported, 0);
}
body::after {
content: 'CSS.registerProperty is NOT supported ❌';
background: #b93c3c;
z-index: var(--not-supported, 0);
opacity: var(--not-supported, 0);
}
body::before,
body::after {
display: none !important;
}
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
*,
*:before,
*:after {
outline: calc(var(--debug) * 1px) red dashed;
}
body {
background-color: var(--card-color);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Mona Sans', sans-serif;
}
body > div {
width: var(--card-width);
width: min(480px, var(--card-width));
aspect-ratio: 1.5/1;
color: white;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
border-radius: var(--card-radius);
cursor: pointer;
}
body > div:hover > div {
mix-blend-mode: darken;
--text-color: white;
box-shadow: 0 0 calc(var(--white-shadow) * 1vw)
calc(var(--white-shadow) * 0.15vw) rgba(255, 255, 255, 0.2);
animation: shadow-pulse calc(var(--animation-speed) * 2) linear infinite;
}
body > div:hover > div:before {
--bg-size: 15;
animation-play-state: paused;
transition: --bg-size var(--interaction-speed) ease;
}
body > div:hover .glow {
--glow-blur: 1.5;
--glow-opacity: 0.6;
--glow-scale: 2.5;
--glow-radius: 0;
--rotate: 900;
--glow-rotate-unit: 0;
--scale-factor: 1.25;
animation-play-state: paused;
}
body > div:hover .glow:after {
--glow-translate-y: 0;
animation-play-state: paused;
transition: --glow-translate-y 0s ease, --glow-blur 0.05s ease,
--glow-opacity 0.05s ease, --glow-scale 0.05s ease,
--glow-radius 0.05s ease;
}
body > div:before,
body > div:after {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: var(--card-radius);
}
body > div > div {
position: absolute;
width: 100%;
height: 100%;
background: var(--card-color);
border-radius: calc(calc(var(--card-radius) * 0.9));
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
text-transform: uppercase;
font-stretch: 150%;
font-size: 18px;
font-size: clamp(1.5vw, 1.5vmin, 32px);
color: var(--text-color);
padding: calc(var(--card-width) / 8);
}
body > div > div span {
display: inline-block;
padding: 0.25em;
border-radius: 4px;
background: var(--text-color);
color: black;
margin-right: 8px;
font-weight: 900;
}
body > div > div:before {
content: '';
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: calc(calc(var(--card-radius) * 0.9));
box-shadow: 0 0 20px black;
mix-blend-mode: color-burn;
z-index: -1;
background: #292929
radial-gradient(
30% 30% at calc(var(--bg-x) * 1%) calc(var(--bg-y) * 1%),
hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 90%)
calc(0% * var(--bg-size)),
hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 80%)
calc(20% * var(--bg-size)),
hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 60%)
calc(40% * var(--bg-size)),
transparent 100%
);
width: calc(100% + var(--border-width));
height: calc(100% + var(--border-width));
animation: hue-animation var(--animation-speed) linear infinite,
rotate-bg var(--animation-speed) linear infinite;
transition: --bg-size var(--interaction-speed) ease;
}
body > div .glow {
--glow-translate-y: 0;
display: block;
position: absolute;
width: calc(var(--card-width) / 5);
height: calc(var(--card-width) / 5);
animation: rotate var(--animation-speed) linear infinite;
transform: rotateZ(calc(var(--rotate) * var(--glow-rotate-unit)));
transform-origin: center;
border-radius: calc(var(--glow-radius) * 10vw);
}
body > div .glow:after {
content: '';
display: block;
z-index: -2;
filter: blur(calc(var(--glow-blur) * 10px));
width: 130%;
height: 130%;
left: -15%;
top: -15%;
background: hsl(
calc(calc(var(--hue) * var(--hue-speed)) * 1deg),
100%,
60%
);
position: relative;
border-radius: calc(var(--glow-radius) * 10vw);
animation: hue-animation var(--animation-speed) linear infinite;
transform: scaleY(calc(var(--glow-scale) * var(--scale-factor) / 1.1))
scaleX(calc(var(--glow-scale) * var(--scale-factor) * 1.2))
translateY(calc(var(--glow-translate-y) * 1%));
opacity: var(--glow-opacity);
}
@keyframes shadow-pulse {
0%,
24%,
46%,
73%,
96% {
--white-shadow: 0.5;
}
12%,
28%,
41%,
63%,
75%,
82%,
98% {
--white-shadow: 2.5;
}
6%,
32%,
57% {
--white-shadow: 1.3;
}
18%,
52%,
88% {
--white-shadow: 3.5;
}
}
@keyframes rotate-bg {
0% {
--bg-x: 0;
--bg-y: 0;
}
25% {
--bg-x: 100;
--bg-y: 0;
}
50% {
--bg-x: 100;
--bg-y: 100;
}
75% {
--bg-x: 0;
--bg-y: 100;
}
100% {
--bg-x: 0;
--bg-y: 0;
}
}
@keyframes rotate {
from {
--rotate: -70;
--glow-translate-y: -65;
}
25% {
--glow-translate-y: -65;
}
50% {
--glow-translate-y: -65;
}
60%,
75% {
--glow-translate-y: -65;
}
85% {
--glow-translate-y: -65;
}
to {
--rotate: calc(360 - 70);
--glow-translate-y: -65;
}
}
@keyframes hue-animation {
0% {
--hue: 0;
}
100% {
--hue: 360;
}
}
</style>
</head>
<body>
<div role="button">
<span class="glow"></span>
<div><span>cool</span>Glowing shadows</div>
</div>
<script>
if (typeof window.CSS.registerProperty === 'function') {
console.log('CSS.registerProperty supported 🎉');
document.body.style.setProperty('--supported', 1);
document.body.classList.add('registerProperty-supported');
} else {
console.log('CSS.registerProperty not supported ❌');
document.body.style.setProperty('--not-supported', 1);
document.body.classList.add('registerProperty-not-supported');
}
</script>
</body>
</html>