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);
}
}
0 Comments