<body>
<div class="container">
<div class="g2">
<div class="nuvem4_4"></div>
<div class="nuvem4_3"></div>
<div class="nuvem4_2"></div>
<div class="nuvem4_1"></div>
<div class="nuvem3_1"></div>
<div class="nuvem3_border"></div>
</div>
<div class="lua"></div>
<div class="lua__contorno"></div>
<div class="g1">
<div class="nuvem2_1"></div>
<div class="nuvem2_2"></div>
<div class="nuvem2_border"></div>
<div class="nuvem1_1"></div>
<div class="nuvem1_2"></div>
</div>
</div>
<h3 class="">based on: <a href="https://www.instagram.com/p/BakZqeeg2X2/" alt="Moon" target="_blank">Moon by @k.ulv</a></h3>
</body>
body {
margin: 0;
padding: 0;
background: #0a1b25;
}
h3, a {
text-align: center;
color: white;
font-family: monospace;
font-size: 14px;
letter-spacing: 1px;
}
.container {
margin: 0 auto;
}
.lua {
margin: 0 auto;
position: relative;
border-radius: 50%;
width: 175px;
height: 175px;
box-shadow: #ffe44b -45px 45px 0 10px;
boder-radius: 10px;
background: transparent;
z-index: 0;
}
.lua__contorno {
margin: 0 auto;
position: relative;
border-radius: 50%;
width: 175px;
height: 175px;
box-shadow: #fec200 -55px 55px 0 15px;
boder-radius: 10px;
background: transparent;
bottom: 175px;
z-index: -1;
}
.nuvem1_1 {
width: 70px;
height: 25px;
margin: 0 auto;
background: #c2fff8;
border-radius: 40px;
position: relative;
bottom: 220px;
left: 30px;
animation: nbaixo 2s ease-in-out alternate infinite running;
}
.nuvem1_2 {
width: 70px;
height: 25px;
margin: 0 auto;
background: #c2fff8;
border-radius: 40px;
position: relative;
bottom: 260px;
left: 60px;
animation: nbaixo 2s ease-in-out alternate infinite running;
}
.nuvem2_1 {
width: 80px;
height: 45px;
margin: 0 auto;
background: #c2fff8;
border-radius: 40px;
position: relative;
top: -155px;
right: 140px;
z-index: 4;
box-shadow: #8af3e5 -20px 0 0 0;
animation: nmeio 2s ease-in-out alternate infinite running;
}
.nuvem2_2 {
width: 80px;
height: 45px;
margin: 0 auto;
background: #c2fff8;
border-radius: 40px;
position: relative;
bottom: 235px;
right: 110px;
box-shadow: #8af3e5 -20px 0 0 0;
z-index: 3;
animation: nmeio 2s ease-in-out alternate infinite running;
}
.nuvem2_border {
width: 120px;
height: 65px;
margin: 0 auto;
background: #0a1b25;
border-radius: 40px;
position: relative;
bottom: 290px;
right: 120px;
opacity: 0.05;
z-index: 2;
animation: nbaixo 2s ease-in-out alternate infinite running;
}
.nuvem3_1 {
width: 80px;
height: 25px;
margin: 0 auto;
background: #c2fff8;
border-radius: 40px;
position: relative;
top: 175px;
right: 38px;
box-shadow: #8af3e5 -35px 0 0 0;
z-index: 3;
animation: nmeio 2s ease-in-out alternate infinite running;
}
.nuvem3_border {
width: 135px;
height: 45px;
margin: 0 auto;
background: #0a1b25;
border-radius: 40px;
position: relative;
top: 140px;
right: 55px;
opacity: 0.05;
z-index: 2;
animation: nmeio 2s ease-in-out alternate infinite running;
}
.nuvem4_1 {
width: 70px;
height: 35px;
margin: 0 auto;
background: #c2fff8;
border-radius: 40px;
box-shadow: #8af3e5 -30px 0 0 0;
position: relative;
top: 160px;
left: 80px;
z-index: 1;
}
.nuvem4_2 {
width: 40px;
height: 35px;
margin: 0 auto;
background: #c2fff8;
border-radius: 20px;
box-shadow: #8af3e5 -15px 0 0 0;
position: relative;
top: 165px;
left: 40px;
z-index: 3;
}
.nuvem4_3 {
width: 50px;
height: 35px;
margin: 0 auto;
background: #c2fff8;
border-radius: 20px;
box-shadow: #8af3e5 -25px 0 0 0;
position: relative;
top: 175px;
left: 70px;
z-index: 2;
}
.nuvem4_4 {
width: 120px;
height: 35px;
margin: 0 auto;
background: #c2fff8;
border-radius: 20px;
box-shadow: #8af3e5 -30px 0 0 0;
position: relative;
top: 185px;
left: 20px;
z-index: 4;
}
.g1 {
width: 300px;
margin: 0 auto;
position: relative;
right: 0;
animation: g1 2s linear alternate infinite running;
}
.g2 {
width: 300px;
margin: 0 auto;
position: relative;
right: 0;
animation: g2 2s linear alternate infinite running;
}
@keyframes g1 {
from { right: 0; }
to { right: 20px; }
}
@keyframes g2 {
from { right: 0; }
to { right: -30px; }
}
/* based on: https://www.instagram.com/p/BakZqeeg2X2/
*/
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.