PURE CSS HYPERDRIVE EFFECT
This pure CSS 3 demo shows a hyperdrive effect with stars streaming by the viewer, leaving light trails across the screen. It illustrates the use of repeating keyframe animations and animated box-shadows.
Implementation details
There are 200 stars, each of which consists of a parent and child element. The child element contains the star body itself, with a slight box-shadow
to give it an aura of light, and an ::after
pseudo element to add the light trail. The parent element is used to add a different rotation to each star so that it flies in a different direction.
The star body is moved outwards from the center of its parent element as well as scaled in size using a CSS keyframe animation that speeds up greatly near the end (using a custom cubic-bezier timing function). This animation is inherited by the light trail which adds some scaling to grow longer and clearer as its nears the edge of the screen. All keyframe animations repeat infinitely, but each has a different duration and start delay to add variation.
The background is by Kevin McLeod at Incompetech.