LITTLE TALKS ABOUT THIS ANIMATION STYLE
H
ello 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.
Table of Contents
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
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
- First you need to Search </b:skin> tag to your template/theme section
- 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
- Now you have to search first, </footer>.
- 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>
- Now you have to save the theme.
- 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.
© Tech Shreyansh
