Pure CSS animated starburst
by marcuserronius
HTML
<html>
<head>
</head>
<body>
</body>
</html>
CSS
@keyframes rotate {
0% {--start: 0.00%;}
2% {--start: 0.20%;}
4% {--start: 0.40%;}
6% {--start: 0.60%;}
8% {--start: 0.80%;}
10% {--start: 1.00%;}
12% {--start: 1.20%;}
14% {--start: 1.40%;}
16% {--start: 1.60%;}
18% {--start: 1.80%;}
20% {--start: 2.00%;}
22% {--start: 2.20%;}
24% {--start: 2.40%;}
26% {--start: 2.60%;}
28% {--start: 2.80%;}
30% {--start: 3.00%;}
32% {--start: 3.20%;}
34% {--start: 3.40%;}
36% {--start: 3.60%;}
38% {--start: 3.80%;}
40% {--start: 4.00%;}
42% {--start: 4.20%;}
44% {--start: 4.40%;}
46% {--start: 4.60%;}
48% {--start: 4.80%;}
50% {--start: 5.00%;}
52% {--start: 5.20%;}
54% {--start: 5.40%;}
56% {--start: 5.60%;}
58% {--start: 5.80%;}
60% {--start: 6.00%;}
62% {--start: 6.20%;}
64% {--start: 6.40%;}
66% {--start: 6.60%;}
68% {--start: 6.80%;}
70% {--start: 7.00%;}
72% {--start: 7.20%;}
74% {--start: 7.40%;}
76% {--start: 7.60%;}
78% {--start: 7.80%;}
80% {--start: 8.00%;}
82% {--start: 8.20%;}
84% {--start: 8.40%;}
86% {--start: 8.60%;}
88% {--start: 8.80%;}
90% {--start: 9.00%;}
92% {--start: 9.20%;}
94% {--start: 9.40%;}
96% {--start: 9.60%;}
98% {--start: 9.80%;}
100% {--start: 10.00%;}
}
body{
position: fixed;
--stripe1: #483d8b;
--stripe2: #8470ff;
--width: 5%;
--start: 0%;
animation-name: rotate;
animation-duration: 4s;
animation-iteration-count: infinite;
background-image:
radial-gradient(rgba(255,255,255,0.5),rgba(0,0,0,0.5)),
conic-gradient(
var(--stripe1) calc(calc(var(--width)*-2) + var(--start)), var(--stripe1) calc(calc(var(--width)*-1) + var(--start)),
var(--stripe2) calc(calc(var(--width)*-1) + var(--start)), var(--stripe2) calc(calc(var(--width)* 0) + var(--start)),
var(--stripe1) calc(calc(var(--width)* 0) + var(--start)), var(--stripe1) calc(calc(var(--width)* 1) + var(--start)),
var(--stripe2) calc(calc(var(--width)* 1) + var(--start)), var(--stripe2) calc(calc(var(--width)* 2) + var(--start)),
var(--stripe1) calc(calc(var(--width)* 2) +...