Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
- var total = 360 * 3 .center(style=`--total: ${total}`) - var i = total; while i-- .particle(style=`--index: ${total - i}`)
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } /* Look, no Sass */ .particle { /* Starting values */ --angle: (5 * var(--index)); --radius: 30; --x: calc(sin(var(--angle)) * var(--radius) * 1vmin); --y: calc(cos(var(--angle)) * var(--radius) * 1vmin); /* Ending values */ /* Had to move these outside the @keyframe and rename them because Chrome was being weird Bonusly, performance seems much better */ --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: animation var(--speed) ease-out infinite alternate var(--delay); transform: translate3d(var(--x), var(--y), 0); opacity: 0; /* Particle styling */ 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; /* Does this help or is translate3d already doing it*/ } @keyframes animation { 100% { transform: translate3d(var(--x2), var(--y2), 0); opacity: 1; } } /* Pen styling, ignore */ body { background: #000; display: flex; min-height: 100vh; justify-content: center; align-content: center; align-items: center; overflow: hidden; }
console.log("Event Fired")