Pure CSS Hyperdrive Effect

September 25th, 2016
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 […]

This article was posted by Independent Software, a website and database application development company based in Maputo, Mozambique. Our website offers regular write-ups on technical and design issues, ranging from details at code level to 3D Studio Max rendering. Read more about Independent Software's philosophy, or get in touch with Independent Software.

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.

See the Pen Hyperdrive Effect in Pure CSS by Independent Software (@independent-software) on CodePen.1

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">