Plain old borders are boring. Let's make them more interesting by adding a gradient border with a pleasing animation! There are many ways to create this kind of border, but the approach we'll take today is to use a pseudo-element to create a border that extends beyond the container, and then animate that pseudo-element. Note that the animation part of this challenge is not supported in Firefox yet, but the border will still render.
0% complete
Loading editor...
<div id="card">🔷</div>
<style>
#preview-container {
padding: 1rem; /* to give space for the border */
}
/*
Support an animatable --rotation property to
use in the background image
*/
@property --rotation {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes spin {
100% {
--rotation: 360deg;
}
}
</style>
Loading editor...