{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
overflow: hidden;
}
.container
{
position: relative;
width: 800px;
display: flex;
justify-content: space-between;
filter: url(#gooey);
}
.container .circle
{
position: relative;
min-width:300px;
height: 300px;
border-radius: 50%;
background: #fff;
}
.container .circle:before
{
content: '';
position: absolute;
top: -50px;
left: -50px;
right: -50px;
bottom: -50px;
border-radius: 50%;
background:#fff;
z-index: -1;
filter: blur(50px);
}
.container .circle.circle1,
.container .circle.circle1:before
{
background:linear-gradient(90deg,#f00,#0ff);
}
.container .circle.circle2,
.container .circle.circle2:before
{
background:linear-gradient(90deg,#ffeb3b,#da00ff);
}
.container .circle.circle1
{
animation: animate1 5s linear infinite;
}
@keyframes animate1
{
0%
{
transform: translateX(0) rotate(0deg);
}
30%
{
transform: translateX(250px) rotate(240deg);
}
60%
{
transform: translateX(250px) rotate(480deg);
}
100%
{
transform: translateX(0) rotate(720deg);
}
}
.container .circle.circle2
{
animation: animate2 5s linear infinite;
}
@keyframes animate2
{
0%
{
transform: translateX(0) rotate(0deg);
}
30%
{
transform: translateX(-250px) rotate(-240deg);
}
60%
{
transform: translateX(-250px) rotate(-480deg);
}
100%
{
transform: translateX(0) rotate(-720deg);
}
}
svg
{
width:0;
height:0;
}
p{font-family: 'Indie Flower', cursive;}