<div class="container"></div>
@layer base, demo;
@layer demo {
.container {
--angle: 0deg;
border-width: 2rem;
border-style: dotted;
border-color: grey;
border-image-source: linear-gradient(
var(--angle),
#900000,
#ee2400,
#ffb09c 20rem
);
border-image-slice: 1;
height: 250px;
width: 250px;
animation: 10s rotate linear infinite;
}
}
@keyframes rotate {
to {
--angle: 360deg;
}
}
@property --angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@layer base {
body {
display: grid;
place-items: center;
height: 100vh;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.