Guys! Thank you all 🥳, I've hit a 100 subscribers to my Newsletter and I'm over the moon! It means a lot to me that people choose to read my articles and subscribe to receive my email every day, from the bottom of my heart: Thank you! 🧁 Therefore I wanted to make a cool 100 subs CSS neon animation to celebrate. See below for what we'll be building today, this amazing CSS Neon Animation HTML Structure As for our HTML we need the following structure: 100 s u bs < = > div class "container" < = > div class "text" < > b < > span </ > span </ > b </ > div </ > div We are going to use the container to center everything and use the span to make a cool neon glitch. CSS Neon First we are going to import a cool , which looks like it could be used in Neon letters. Google font @ url(//fonts.googleapis.com/css?family=Pacifico); import The on to our Neon effect! { : ; : - ; : ; : , , , , ;
} .text b font 400 25vh 'Pacifico' letter-spacing 5px color #fee text-shadow 0 0px 10px 0 0 1em #560a86 0 0 0.5em #560a86 0 0 0.1em #560a86 0 10px 3px #333 As you see, we are setting our font to be the Google Font, and making it a font-weight of 25vh (25% . Viewport Height Then we are using the text-shadow to make it show as Neon. We add multiple glow "layers" and end with a dark grey to make it appear thicker. Note: You can use a cool tool like this for creating text-shadows CSS Neon Glitch Animation We added a glitch on the u letter. This is common in Neon, and we can re-create this using CSS Animations. { : flicker linear infinite ;
}

@ flicker {
  75% { : inherit; : inherit;
  }
  76% { : ;
  }
  77% { : inherit; : none;
  }
  78% { : inherit; : inherit;
  }
  79% { : ; : none;
  }
  80% { : inherit; : inherit;
  }
  90% { : ; : none;
  }
  90 % { : inherit; : inherit;
  }
} .text b span animation 2s keyframes color text-shadow color #222 color text-shadow color text-shadow color #222 text-shadow color text-shadow color #222 text-shadow .5 color text-shadow The actual animation is a mix of resetting the color and removing the text-shadow for a split second; this gives it the appeal of flickering. Thank you for reading, and let's connect! Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on or Facebook Twitter Previously published at https://daily-dev-tips.com/posts/css-neon-animation/

Facebook

Google

Twitter

Creating Mouse Tracking Eyes using Javascript 👀

How To Build a Realtime Photoshop 🎨

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

How To Create CSS Neon Animation

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Write A Letter Your Future Self Will Thank You For

10 Useful Assets and Third-party Kits for Unity Developers of Any Level

Recommended Read: 11 JavaScript Animation Libraries For 2019

10 JavaScript Animation Libraries to Follow

App Design Made Easy

Write A Letter Your Future Self Will Thank You For

10 Useful Assets and Third-party Kits for Unity Developers of Any Level

Recommended Read: 11 JavaScript Animation Libraries For 2019

10 JavaScript Animation Libraries to Follow

App Design Made Easy

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps