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