code show as below:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>body,
html {
height: 100%;
width: 100vw;
background: #fff;
display: flex;
justify-content: center;
align-items: center;
--elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275);
--x: 0px;
--y: 0px;
--t: rgba(255, 255, 255, 0.001);
--lightest: #f897d5;
--light: #f567c2;
--dark: #755ad0;
--darkest: #1a2a6c;
margin: 0;
padding: 0;
overflow: hidden;
}
body {
* {
box-sizing: border-box;
}
}
.inner {
display: inline-block;
position: relative;
pointer-events: all;
z-index: 2;
cursor: pointer;
box-shadow: 0 0 0 500vmin #fff;
}
.inner:hover {
&:active {
&:before {
// background-size: 35% 60%, 100% 100%, 100%;
}
}
&:before {
filter: blur(2px) brightness(1);
background-size: 0px 0px, 100% 100%, 100%;
transition: transform 0.5s var(--elastic),
background-size 0.25s ease-in-out;
}
}
.inner:before {
content: "";
position: absolute;
width: 200%;
height: 200%;
top: 0rem;
left: 0rem;
filter: blur(2px) brightness(0);
background: radial-gradient(
ellipse at center,
rgba(0, 0, 0, 0.25) 0%,
var(--t) 20%
),
radial-gradient(
circle at center,
var(--lightest),
var(--light) 5%,
var(--dark) 30%,
var(--darkest) 50%
),
var(--darkest);
background-size: 0px 0px, 0px 0px, 100%;
background-position: 50% 50%;
background-repeat: no-repeat;
opacity: 1;
mix-blend-mode: lighten;
z-index: 2;
transition: transform 0.5s var(--elastic), background-size 0.25s ease-in-out,
filter 0.5s ease-in-out;
transform: translate(calc(var(--x) - 50%), calc(var(--y) - 50%));
pointer-events: none;
}
button {
padding: 3.5rem 6rem;
border: none;
font-size: 1.5rem;
position: relative;
background: transparent;
color: #fff;
z-index: 2;
cursor: pointer;
font-weight: 500;
letter-spacing: 2px;
text-transform: uppercase;
text-shadow: clamp(-8px, calc((var(--width) / 2 - var(--x)) / 8), 8px)
clamp(-8px, calc((var(--height) / 2 - var(--y)) / 8), 8px) 12px
rgba(0, 0, 0, 0);
transition: text-shadow 500ms var(--elastic);
&:hover {
--shadow: max(
calc(
(var(--width) / 2 - var(--x)) / 8 +
((var(--height) / 2 - var(--y)) / 3)
),
calc(
(
((var(--width) / 2 - var(--x)) / 8) +
((var(--height) / 2 - var(--y)) / 3)
) * -1
),
5px
);
text-shadow: clamp(-6px, calc((var(--width) / 2 - var(--x)) / 12), 6px)
clamp(-4px, calc((var(--height) / 2 - var(--y)) / 16), 4px)
var(--shadow) #000;
}
&:hover ~ .blob {
&:before {
transition: transform 500ms var(--elastic),
box-shadow 1000ms var(--elastic);
transform: translate(
clamp(5%, calc(var(--x) - 50%), 550%),
clamp(1rem, calc(var(--y) - 50%), 5rem)
)
scale(1.25);
box-shadow: 0 0 0 0.05rem #fff, 0 -6rem 0 1.25rem #fff,
0 6rem 0 1.25rem #fff;
}
}
&:active {
cursor: grab;
}
&:active:hover ~ .blob {
&:before {
box-shadow: 0 0 0 0rem #fff, 0 -5rem 0 1.75rem #fff,
0 5rem 0 1.75rem #fff;
transition: transform 500ms var(--elastic),
box-shadow 500ms var(--elastic);
transform: translate(
clamp(5%, calc(var(--x) - 50%), 550%),
clamp(calc(50% + 1rem), calc(var(--y) - 50%), calc(50% + 1.5rem))
)
scale(1);
}
}
}
.blob {
position: absolute;
pointer-events: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #fff;
filter: blur(12px) contrast(25);
z-index: 1;
&:before,
&:after {
content: "";
position: absolute;
background: #000;
}
&:before {
width: 15%;
height: auto;
z-index: 2;
transition: transform 750ms var(--elastic),
box-shadow 500ms var(--elastic);
aspect-ratio: 1/1;
box-shadow: 0 0 0 0.75rem #fff, 0 -8rem 0 -2rem #fff, 0 8rem 0 -2rem #fff;
left: 0;
top: 0;
border-radius: 100%;
transform: translate(
clamp(10%, calc(var(--x) - 50%), 550%),
clamp(1rem, calc(var(--y) - 50%), 5rem)
)
scale(0);
}
&:after {
width: calc(100% - 4rem);
height: calc(100% - 4rem);
top: 2rem;
left: 2rem;
border-radius: 5rem;
box-shadow: 0 0 0 8rem #fff;
}
}
</style>
<body>
<div class="inner">
<button type="button">动态按钮</button>
<div class="blob"></div>
</div>
</body>
<script>
// https://codepen.io/cobra_winfrey/details/mdGBGEO
document.querySelectorAll(".inner").forEach((button) => {
button.onmousemove = (e) => {
const target = e.target;
const rect = target.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
button.style.setProperty("--x", `${
x}px`);
button.style.setProperty("--y", `${
y}px`);
button.style.setProperty("--height", `${
rect.height}px`);
button.style.setProperty("--width", `${
rect.width}px`);
};
});
</script>
</html>
