Hi everybody, welcome to www.anandnawal.com 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.
Steps
- Find</b:skin> in your template/or in wordpress theme of your site or enclosed as <style> the css code here</style> put it anywhere in the footer.
- Copy the below CSS and paste it above the </b:skin> in blogger or above footer in wordpress
/* Bottom Bar Animation by www.naijatechnews.com */ .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%}}
- Now, find </footer>
- Copy the below code and paste it just above the </footer>
<!--[ Bottom Bar Animation by www.anandnawal.com ]--><div class='animeTFZ'><div class='animeBlurTFZ'></div></div>
- Now, Save the theme
- 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..
For more such interesting article like this, app/softwares, games, Gadget Reviews, comparisons, troubleshooting guides, listicles, and tips & tricks related to Windows, Android, iOS, and macOS, follow us on Google News, Facebook, Instagram, Twitter, YouTube, and Pinterest.