Lately I wanted certain cards to stand out—with a Zitch of glowing light circling the border🌀.
The can be on hover or when user scroll the page depend if it mobile or desktop (portrait or landscape mode).
I considered two approaches:
border-image + conic-gradient (what I used)
or offset-path with a moving dot (discarded, probably can give nice rotating effect for another project)
*content
@property --angle {
syntax: "";
initial-value: 0deg;
inherits: true;
}
@keyframes rotate-in {
100% { --angle: 360deg; }
}
.glow-border {
border: 1px solid transparent;
box-sizing: content-box;
--color: hsl(200 100% 70%);
--angle: 0deg;
border-image-source: conic-gradient(
from var(--angle),
transparent,
var(--color) 10deg 15deg,
transparent 18deg
);
border-image-slice: 3;
border-image-outset: 0.3em;
animation: rotate-in 1s ease-in 10;
}