Making glowing lights with CSS



Hi all, in this demo I will show you how I made some glowing lights purely in CSS.

The demo and source code is available below, feel free to use it however you like!

See the Pen Glowing lights loader animation with pure CSS by Creative Punch (@CreativePunch) on CodePen.

As you can see this is a smooth loader animation in CSS, just like my other demo which I made and described in Sass and Compass.

The HTML is once again really simple, so let’s skip right to the CSS.



ul#loader li {
  display: inline-block;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 3px;
  margin: 0px;
  border-radius: 30px;
  box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.7), 1px 1px 1px rgba(255, 255, 255, 0.1);
}
ul#loader li:before {
  background-color: rgba(30, 100, 255, 0.2);
  content: "";
  width: 20px;
  height: 20px;
  display: block;
  border-radius: 20px;
  box-shadow: inset -5px -5px 20px rgba(25, 255, 255, 0.2);
  animation: shadow 1.5s ease-in-out infinite alternate;
}

The key properties here are the box-shadows and the extensive use of rgba(). using rgba() allows us to make use of the alpha channel .

We added an animation property which I called “shadow”

And here are the keyframes:

@keyframes shadow {
  0% {
    background-color: rgba(30, 100, 255, 0.2);
  }

  100% {
    background-color: rgba(150, 200, 255, 0.9);
  }
}

We want to delay this animation also, so we will spread some animation delay over our child elements!

ul#loader li:nth-child(1):before {
  animation-delay: 0.1s;
}

ul#loader li:nth-child(2):before {
  animation-delay: 0.2s;
}

ul#loader li:nth-child(3):before {
  animation-delay: 0.3s;
}

...

And that’s all there is to it!

I hope you like this effect! If you did, feel free to share it on all your favorite social media.

Share the knowledge!
Share on Facebook0Tweet about this on Twitter0Share on Google+0Share on StumbleUpon23Share on Reddit0Share on LinkedIn0Share on TumblrBuffer this pageDigg this

Comments

You may also like...

Stay updated
Subscribe!