codemediaweb.com

Code Media

hire me

CSS Glowing Icons Animation Effect – Tutorial + Code

by
CSS Glowing Icons Animation Effect

In this article, you will learn how to create CSS Glowing Icons animation using HTML and CSS. This kind of CSS glow animation you can easily create with the help of CSS. I use icons in many places on social media. But if it is a little animated then it seems much more interesting. Different colors have been used herein the icons. These colors can be seen at certain intervals. 

I used HTML to create the icons. Font awesome CDN link helped to make these icons work. Then with the help of CSS, we have added different types of colors here. @Keyframes have been used to make those colors animated.

CSS Glowing Icons Animation

Below is a step-by-step tutorial on how to create this CSS Glowing Icons Animation Effect. For this, you need to know a little bit about HTML CSS. First, you create an HTML and CSS file then follow the step-by-step tutorials below.

See the Pen CSS Glowing Icon Animation Effect by backlinkn11@gmail.com (@Sanchita-Das) on CodePen.

Hope the above demo has helped you to get a live demo of icon to hover effects. You can copy all the source code from above if you want. You will also find a download button below which contains the code.

1. Add Glowing Social icons

I have added some icons here using some amount of HTML. This is basically a small amount of HTML code used here.

  <div class=”container”>
    <i class=”fa fa-apple” id=”apple”></i>
    <i class=”fa fa-twitter” id=”twitter”></i>
    <i class=”fa fa-github-square github” id=”github”></i>
    <i class=”fa fa-facebook-square” id=”facebook”></i>
  </div>
Add Glowing Social icons

2. Design the webpage

Now you have to design it with the help of CSS. First I added some basic colors for the background.

* {
  margin: 0;
  padding: 0;
}
body {
  height: 100vh;
  width: 100vw;
  background: #18191f;
}
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}
Design the webpage

3. Add glowing colors to the icons

Now I have added CSS code to design the icons. font-size: 8em helped to increase the size of each icon. Here the time is set to 3 seconds using animation. 

This will help in changing the color at certain times. That means the colors can be seen again at 3-second intervals.

#apple,
#twitter,
#github,
#facebook {
  font-size: 8em;
  background-color: #18191f;
  color: #fff;
  box-shadow: 2px 2px 2px #00000080, 
10px 1px 12px #00000080,
    2px 2px 10px #00000080, 
2px 2px 3px #00000080, 
inset 2px 2px 10px #00000080,
        inset 2px 2px 10px #00000080, 
inset 2px 2px 10px #00000080,
        inset 2px 2px 10px #00000080;
  border-radius: 29px;
  padding: 11px 19px;
  margin: 0 40px;
  animation: animate 3s linear infinite;
  text-shadow: 0 0 50px #0072ff, 
0 0 100px #0072ff, 
0 0 150px #0072ff,
        0 0 200px #0072ff;
}
Add glowing colors to the icons

4. Activate glow animation with @keyframes

The color animation added above requires the help of @keyframes to make the animation work. As you can see in the image above, only one color is seen here. @ After using keyframes, all the colors can be seen from time to time.

@keyframes animate {
  from {
    filter: hue-rotate(0deg);
  }
  to {
    filter: hue-rotate(360deg);
  }
}
Activate glow animation with @keyframes

5. At the same time, arrange to see a different color for each icon

Now you need to add the following CSS code to determine the time of the color change of the three icons. As a result, we will see different colors for each icon at a time. Here, the time of onset of the 3 icons has changed a bit.

#twitter {
  animation-delay: 0.3s;
}
#facebook {
  animation-delay: 0.7s;
}
#github {
  animation-delay: 0.1s;
}
At the same time, arrange to see a different color for each icon

Hopefully from the above tutorial, you have learned how to create this CSS Glowing Icons Animation Effect. If there is any difficulty then you can definitely comment.

Leave a comment