Animated Background Effect

In this tutorial I will show you how to create animated background effect using Elementor Pro. Here I will use few line of HTML and CSS code. Will not use any more extra plugin. So your site will be overloaded.

Essential Links

Get Domain & Webhosting(60% off)

Get Elementor Pro

html code

CSS code

Copy this HTML Code

<div class="bubbles"> <span style="--i:11"></span> <span style="--i:12"></span> <span style="--i:24"></span> <span style="--i:10"></span> <span style="--i:14"></span> <span style="--i:23"></span> <span style="--i:18"></span> <span style="--i:16"></span> <span style="--i:19"></span> <span style="--i:20"></span> <span style="--i:22"></span> <span style="--i:25"></span> <span style="--i:18"></span> <span style="--i:21"></span> <span style="--i:15"></span> <span style="--i:13"></span> <span style="--i:26"></span> <span style="--i:17"></span> <span style="--i:13"></span> <span style="--i:28"></span> <span style="--i:11"></span> <span style="--i:12"></span> <span style="--i:24"></span> <span style="--i:10"></span> <span style="--i:14"></span> <span style="--i:23"></span> <span style="--i:18"></span> <span style="--i:16"></span> <span style="--i:19"></span> <span style="--i:20"></span> <span style="--i:22"></span> <span style="--i:25"></span> <span style="--i:18"></span> <span style="--i:21"></span> <span style="--i:15"></span> <span style="--i:13"></span> <span style="--i:26"></span> <span style="--i:17"></span> <span style="--i:13"></span> <span style="--i:28"></span> </div>

Copy CSS Code

:root{
    --color1: #4AF4D1;
    --color1-shadow: #1C564A;
    --color2: #F03131;
    --color2-shadow: #7D1F1F;
    --size: 20px;
}

selector .bubbles span{
    background: var(--color1);
    width: var(--size);
    height: var(--size);
    display: inline-block;
    border-radius: 50%;
    margin: 0 5px;
    box-shadow: 0 0 0 6px var(--color1-shadow),
    0 0 50px var(--color1),
    0 0 100px var(--color1);
    animation:animate 20s linear infinite;
    animation-duration: calc(125s/var(--i));
}

selector .bubbles span:nth-child(even){
    background: var(--color2);
    box-shadow: 0 0 0 6px var(--color2-shadow),
    0 0 50px var(--color2),
    0 0 100px var(--color2);
    
}
@keyframes animate{
    0%{
        transform: translateY(100vh) scale(0);
    }
    100%{
        transform: translateY(-10vh) scale(1);
    }
}

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Start Working with me for any wordpress project!

get started now!