<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<title></title>
</head>
<style>
body {display: flex;justify-content: center;align-items: center; height: 100vh; overflow: hidden;background-color: #000;}
.particle{--angle:(5 * var(--index));--radius:30;--x:calc(sin(var(--angle)) * var(--radius) * 1vmin);--y:calc(cos(var(--angle)) * var(--radius) * 1vmin);--angle2:calc(var(--index) * 1turn / var(--total));--x2:calc(sin(var(--angle2)) * var(--radius) * 1vmin);--y2:calc(cos(var(--angle2)) * var(--radius) * 1vmin);--size:5;--speed:3s;--delay:calc(var(--index) * var(--speed) / var(--total) * 4);--hue-angle:10;--hue-range:60;--hue-start:20;animation:animation var(--speed) ease-out infinite alternate var(--delay);transform:translate3d(var(--x),var(--y),0);opacity:0;border-radius:50%;background:currentColor;color:oklch(75% 0.3 calc(sin(var(--hue-angle) * var(--index)) * var(--hue-range) + var(--hue-start)));position:absolute;width:calc(var(--size) * 0.1vmin);height:calc(var(--size) * 0.1vmin);contain:strict;}@keyframes animation{100%{transform:translate3d(var(--x2),var(--y2),0);opacity:1;}}
</style>
<body>
<div class="center" style="--total: 1080"></div>
</body>
<script>
for (let i = 0; i < 1080; i++) {
document.querySelector('.center').innerHTML += '<div class="particle" style="--index: ' + i + '"></div>'
}
</script>
</html>
