Animated Blob Effect Using Elementor Pro

In this tutorial I will show you how to create aminated blob effect with any text box or with any section. Here I have used Elementor pro version and few line of CSS code.

Add this CSS code with inner section

selector:before{
    content: "";
    position: absolute;
    left:0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    border: 2px solid #fff;
    transition: .5s;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
     animation: animate 10s linear infinite;
}
selector:after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    transition: .5s;
    border: 2px solid #fff;
    border-radius:38% 62% 63% 37% / 41% 44% 56% 59%;
     animation: animate2 6s linear infinite;
}
selector{
    position: relative;
    z-index: 10;
}
selector:hover p{
    color: #fff;
}
selector:hover:before, selector:hover:after{
    background: rgba(0,0,255,.6);
    border: none;
}
@keyframes animate{
    0%{
        transform:rotate(0deg);
    }
    100%{
        transform:rotate(360deg);
    }
}
@keyframes animate2{
    0%{
        transform:rotate(360deg);
    }
    100%{
        transform:rotate(0deg);
    }
}

Start Working with me for any wordpress project!

Get in touch

Have a few questions or just want to say hello? Use the form below to get in touch with me! If you are ready to book a new project please click here to fill out a design inquiry.

Call me by Skype (farjana.rashid55)

12 + 15 =

[wpforms id="2272"]