Chorus Line dancer (Only CSS)

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) } }
JAVASCRIPT
Expand for more options Login