50 lines
879 B
Plaintext
50 lines
879 B
Plaintext
---
|
|
interface Props {
|
|
top: string;
|
|
left: string;
|
|
size: string;
|
|
opacity?: string;
|
|
blur?: string;
|
|
}
|
|
|
|
const {
|
|
top = "0",
|
|
left = "0",
|
|
size = "2rem",
|
|
opacity = "1",
|
|
blur = "10rem",
|
|
} = Astro.props;
|
|
---
|
|
|
|
<div></div>
|
|
|
|
<style define:vars={{ top, left, size, opacity, blur }}>
|
|
div {
|
|
width: var(--size);
|
|
height: var(--size);
|
|
|
|
position: absolute;
|
|
top: var(--top);
|
|
left: var(--left);
|
|
|
|
border-radius: 100%;
|
|
background-color: var(--clr-ts-red-400);
|
|
filter: blur(var(--blur));
|
|
opacity: var(--opacity);
|
|
|
|
z-index: -1;
|
|
|
|
/* animation: 3s infinite alternate pulsate ease-out; */
|
|
}
|
|
|
|
/* @keyframes pulsate {
|
|
from {
|
|
transform: scale3d(0.8, 0.8, 1);
|
|
}
|
|
|
|
to {
|
|
transform: scale3d(1, 1, 1);
|
|
}
|
|
} */
|
|
</style>
|