Tech & Fun Zone

Short Talk

Hi everybody, welcome to Tech and Fun Zone in this post I will give you an amazing animation code from which you can add Neon Glowing Line Animation at bottom of your site like Google assistant.

For Demo You can Check Our Website. There is a Neon Glow Animation Line at the bottom of the site.

How to Add Neon Glowing Line Animation

Just follow some simple steps to add this animation in your website

STEPS

Before following these steps please take back-up of your theme to make your site+theme more safe.

Adding CSS Code

1. Find </b:skin> in your template/theme of site
2. Copy the below CSS and paste it above the </b:skin>

/* Bottom Bar Animation by Tech and Fun Zone */ .animeTFZ,.animeBlurTFZ{position:fixed;width:100%;bottom:0;left:0;right:0;height:3px;z-index:23;background:linear-gradient(-45deg, #4086F4, #31A952, #FBBE01, #EB4132,#4086F4, #31A952, #FBBE01, #EB4132);background-size:200%;-webkit-animation:animeBar 5s linear infinite;animation:animeBar 5s linear infinite}.animeBlurTFZ{height:10px;z-index:22;filter:blur(10px);opacity:.7}@-webkit-keyframes animeBar{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}@keyframes animeBar{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} 

Adding HTML Code

1. Now, find </footer>
2. Copy the below code and paste it just above the </footer>

<!--[ Bottom Bar Animation by Tech and Fun Zone ]-->
<div class='animeTFZ'>
  <div class='animeBlurTFZ'>
  </div>
</div>

3. Now, Save the theme
4. All right now let's go to Your Website and refresh your Site and we can see that neon light animation is being displayed over there

Conclusion—

Hopefully, the Above tutorial has completely helped you to learn How to Add Neon Light Animation in Your Website. If you have any difficulty in understanding this tutorial. Then of course you can ask me by commenting. I will help you completely. Thank you for visiting. Happy Blogging..

Go to Link

© Tech & Fun Zone