How to Add Neon Lighting Animation to our website

Rate this post

LITTLE TALKS ABOUT THIS ANIMATION STYLE

Hello friends, you are welcome in our new blog post, in this post of Tech Shreyansh, I am going to tell you some different type of animation code, so that you can apply neon glowing line animation at the bottom of your website Google Assistant like.

20230627 191813

If you want to see any kind of demo then you can visit my website. Here I have put neon glow line animation buttons in the site

HOW TO ADD NEON GLOWING ANIMATION LINE ON WEBSITE

Today I am going to teach you, friends, how you can install the neon lighting animation box. To install it, you do not need much coding knowledge, you just have to follow all the steps given by me properly. If you have any kind of problem then join our Telegram group and tell us your problem, we will try our best to solve it there.

All you have to do is follow the steps given below. To add this animation style to your website.

ADDING THE CSS CODE TO THE THEME SECTION

  1. First you need to Search </b:skin> tag to your template/theme section
  2. I have given you the below CSS code, you have to copy it and paste it above the </b:skin> tag.
            /* Bottom Bar Animation by Tech Shreyansh */ .animeTS,.animeBlurTS{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}.animeBlurTS{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%}}
  
  

EMBED HTML CODE

  1. Now you have to search first, </footer>.
  2. Copy the code I have given you below and add </footer> Paste it on top of the section.
      <!--[ Bottom Bar Animation by Tech Shreyansh ]-->
<div class='animeTS'>
  <div class='animeBlurTS'>
  </div>
</div>
  
  
  1. Now you have to save the theme.
  2. Now you can see by visiting your website, after visiting the website, refresh it, and you can see, the neon light animation at the bottom of your website will display towards the bottom boots.

CONCLUSION

So, friends, you must have understood today’s tutorial. Today, with my help, you have learned how to add neon light animation to your website. If you have any kind of problem in understanding this tutorial, then you can understand and ask us, by commenting, I will help you in every way, thank you for visiting our website. happy blogging days.

One Request?

I worked hard on this post to help the blogging community. It would help me a lot if you consider sharing it on social media networks. Because Sharing Is Caring.. ♥️

Sharing Is Caring...
alt_here

Hello! My name is Tech Shreyansh, and I'm a Youtuber and Content Creator from Azamgarh, India. I have a channel on YouTube called Tech Shreyansh where I upload Tech Video, Also I'm a Professional Web Developer or Designer. I enjoy playing with Codes and making Interesting Things.

Leave a comment