CSS
html, body {
background: linear-gradient(to left, #00d2ff , #3a7bd5);
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.cloud {
width: 22rem;
height: 8rem;
background: #f2f9fe;
background: linear-gradient(top, #f2f9fe 5%, d6f0fd 100%);
border-radius: 100px;
animation: floating 3s ease-in-out infinite;
position: relative;
margin: 120px auto 20px;
}
.cloud:after, .cloud:before {
content: "";
position: absolute;
background: #f2f9fe;
z-index: -1;
}
.cloud:after {
width: 100px;
height: 100px;
top: -50px;
left: 50px;
border-radius: 100px;
}
.cloud:before {
width: 180px;
height: 180px;
top: -90px;
left: 120px;
border-radius: 200px;
}
.shadow {
width: 350px;
position: absolute;
bottom: -25px;
background: #000;
animation: scale 3s ease-in-out infinite;
box-shadow: 0 0 45px 8px rgba(0,0,0,0.4);
}
@keyframes floating{
from { transform:translate(0, 0px); }
65% { transform:translate(0, 15px); }
to { transform: translate(0, -0px); }
}
@keyframes scale {
from { transform: scale(.9) }
65% { transform: scale(1) }
to { transform: scale(.9) }
}
1 Response
Cool!