HTML
<div class="container">
<div class="luz"></div>
<ul class="bailar">
<li><div class="bo"><div class="bo3"></div><div class="hand"></div><div class="cuello"></div><div class="hut"></div></div><div class="leg"><div class="shoes"></div></div><div class="leg3"><div class="shoes"></div></div></li>
<li><div class="bo"><div class="bo3"></div><div class="cuello"></div><div class="hut"></div></div><div class="leg"><div class="shoes"></div></div><div class="leg3"><div class="shoes"></div></div></li>
<li><div class="bo"><div class="bo3"></div><div class="cuello"></div><div class="hut"></div></div><div class="leg"><div class="shoes"></div></div><div class="leg3"><div class="shoes"></div></div></li>
<li><div class="bo"><div class="bo3"></div><div class="cuello"></div><div class="hut"></div></div><div class="leg"><div class="shoes"></div></div><div class="leg3"><div class="shoes"></div></div></li>
<li><div class="bo"><div class="bo3"></div><div class="cuello"></div><div class="hut"></div></div><div class="leg"><div class="shoes"></div></div><div class="leg3"><div class="shoes"></div></div></li>
<li><div class="bo"><div class="bo3"></div><div class="cuello"></div><div class="hut"></div></div><div class="leg"><div class="shoes"></div></div><div class="leg3"><div class="shoes"></div></div></li>
<li><div class="bo"><div class="bo3"></div><div class="cuello"></div><div class="hut"></div></div><div class="leg"><div class="shoes"></div></div><div class="leg3"><div class="shoes"></div></div></li>
<li><div class="bo"><div class="bo3"></div><div class="cuello"></div><div class="hut"></div></div><div class="leg"><div class="shoes"></div></div><div class="leg3"><div class="shoes"></div></div></li>
<li><div class="bo"><div class="bo3"></div><div class="cuello"></div><div class="hut"></div></div><div class="leg"><div class="shoes"></div></div><div class="leg3"><div class="shoes"></div></div></li>
<li><div class="bo"><div class="bo3"></div><div class="cuello"></div><div class="hut"></div></div><div class="leg"><div class="shoes"></div></div><div class="leg3"><div class="shoes"></div></div></li>
<li><div class="bo"><div class="bo3"></div><div class="cuello"></div><div class="hut"></div></div><div class="leg"><div class="shoes"></div></div><div class="leg3"><div class="shoes"></div></div></li>
<li><div class="bo"><div class="bo3"></div><div class="hand3"></div><div class="cuello"></div><div class="hut"></div></div><div class="leg"><div class="shoes"></div></div><div class="leg3"><div class="shoes"></div></div></li>
</ul>
</div>
CSS
body{
background:black;
}
.container{
position:relative;
width:800px;
height:600px;
background:#121212;
margin:90px auto;
}
.luz{
position:absolute;
width:700px;
height:350px;
border-radius:600px 600px 0 0;
background:#212121;
margin:121px 50px;
}
ul.bailar{
position:absolute;
width:800px;
height:300px;
list-style:none;
margin:192px 25px
}
ul.bailar li{
display:inline-block;
margin-right:40px;
}
.bo{
position:absolute;
width:21px;
height:19px;
border-radius:100%;
background:#DDA03E;
margin:125px 121px;
transform-origin:top center;
animation:subes 2.1s alternate infinite;
}
.bo::before{
content:"";
position:absolute;
border-top: 30px solid #DDA03E;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
height: 0;
width: 12px;
margin:-21px 0px
}
.bo::after{
content:"";
position:absolute;
border-bottom: 16px solid #DDB068;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
height: 0;
width: 14px;
margin:0px -5px
}
.bo3{
position:absolute;
width:21px;
height:7px;
border-radius: 7px 7px 0 0;
background:#DDA03E;
margin:-30px 1px;
}
.bo3::before{
content:"";
position:absolute;
width:50px;
height:7px;
background:#DDA03E;
margin:3px -33px;
}
.bo3::after{
content:"";
position:absolute;
width:50px;
height:7px;
background:#DDA03E;
margin:3px 7px;
}
.hand{
position:absolute;
width:9px;
height:7px;
border-radius:100%;
background:#FCC9AE;
margin:-27px -40px
}
.hand3{
position:absolute;
width:9px;
height:7px;
border-radius:100%;
background:#FCC9AE;
margin:-27px 55px
}
.cuello{
position:absolute;
width:6px;
height:9px;
background:#F9CC95;
border-radius:0 0 6px 6px;
margin:-37px 9px
}
.cuello::before{
content:"";
position:absolute;
width:23px;
height:23px;
border-radius:100%;
background:#FCC9AE;
margin:-21px -8px
}
.cuello::after{
content:"";
position:absolute;
width:7px;
height:3px;
border-radius:0 0 9px 9px;
background:#F96B6D;
margin:-5px 0px
}
.hut{
position:absolute;
width:30px;
height:5px;
border-radius:12px;
background:#DDA03E;
margin:-55px -2px
}
.hut::before{
content:"";
position: absolute;
width: 21px;
height: 21px;
background: #DDA03E;
margin:-14px 4px;
}
.leg{
position:absolute;
width:10px;
height:33px;
border-radius:40%;
background:#DDBB85;
margin:135px 123px;
transform-origin:top center;
animation:sube 2.1s alternate infinite;
}
.leg::before{
content:"";
position:absolute;
width:9px;
height:73px;
border-radius:100%;
background:#DDBB85;
margin:12px 1px
}
.leg3{
position:absolute;
width:10px;
height:33px;
border-radius:40%;
background:#DDBB85;
margin:135px 130px;
transform-origin:top center;
animation:sube3 2.1s alternate infinite;
}
.leg3::before{
content:"";
position:absolute;
width:9px;
height:73px;
border-radius:100%;
background:#DDBB85;
margin:12px 1px
}
.shoes{
position:absolute;
width:7px;
height:12px;
border-radius:100%;
background:#DDA03E;
margin:80px 2px;
}
@keyframes sube{
0%,50%,70%{transform:rotate(0deg) }
100%{transform:rotate(-70deg) }
}
@keyframes sube3{
0%{transform:rotate(70deg) }
50%,70%,100%{transform:rotate(0deg) }
}
@keyframes subes{
0%{transform:rotate(3deg) }
50%,70%{transform:rotate(0deg) }
100%{transform:rotate(-3deg) }
}
