Loading...
Visit Our New Site Go To

How to Add Neon Light Animation in Your Website

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

    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>
    3. /* 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>
    3. <!--[ Bottom Bar Animation by Tech and Fun Zone ]-->
      <div class='animeTFZ'>
        <div class='animeBlurTFZ'>
        </div>
      </div>
    4. Now, Save the theme
    5. 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..

    © Tech & Fun Zone

    About the Author

    Student | Blogger | Developer

    2 comments

    1. not finding
      1. What are you not finding?
    Cookie Consent
    We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
    Oops!
    It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.