retr0.id
+6
-2
src/layout.tsx
+6
-2
src/layout.tsx
···
74
74
@keyframes sparkle {
75
75
0% {
76
76
opacity: 1;
77
-
transform: translate(0, 0) rotate(0deg) scale(1);
77
+
transform: translate(0, 0) rotate(var(--ttheta1)) scale(1);
78
78
}
79
79
100% {
80
80
opacity: 0;
81
-
transform: translate(var(--tx), var(--ty)) rotate(180deg) scale(0);
81
+
transform: translate(var(--tx), var(--ty)) rotate(var(--ttheta2)) scale(0);
82
82
}
83
83
}
84
84
`;
···
100
100
101
101
const tx = (Math.random() - 0.5) * 50;
102
102
const ty = (Math.random() - 0.5) * 50;
103
+
const ttheta1 = Math.random() * 360;
104
+
const ttheta2 = ttheta1 + (Math.random() - 0.5) * 540;
103
105
star.style.setProperty("--tx", tx + "px");
104
106
star.style.setProperty("--ty", ty + "px");
107
+
star.style.setProperty("--ttheta1", ttheta1 + "deg");
108
+
star.style.setProperty("--ttheta2", ttheta2 + "deg");
105
109
106
110
document.body.appendChild(star);
107
111