-Crazy light... (Only CSS)

HTML
<div class="contenedor"> <div class="table"><span class="table3"></span></div> <div class="aur"><span class="circ"></span></div> <div class="aur3"><span class="circ"></span></div> <div class="compu"></div> <div class="libro"><span class="cinta"></span></div> <div class="lampara"></div> <div class="lamp"></div> <div class="estante"><div class="book"></div><span class="flores"><span class="flor"></span></span></div> <div class="estante3"><span class="book3"></span><span class="book7"></span><span class="book9"></span></div> <div class="reloj"></div> <div class="colores"></div> <div class="colores3"></div> <div class="cubo"></div> </div>
CSS
body{ background:black; } .contenedor{ position:relative; width:800px; height:600px; background:#0B0112; margin:221px auto; border:9px solid #120B23; } .table{ position:absolute; width:700px; height:30px; background:#06000C; margin:400px 50px } .table::before{ content:""; display:block; width:30px; height:199px; background:#06000C; margin:0px 50px } .table::after{ content:""; display:block; width:30px; height:199px; background:#06000C; margin:-199px 630px } .table3{ position:absolute; width:132px; height:169px; background:#08000C; margin:-169px 80px;} .table3::before{ content:""; position:absolute; width:132px; height:169px; background:#08000C; margin:0px 418px;} .aur, .aur3{ position:absolute; width:50px; height:96px; border-radius:30px; background:#525051; } .aur{ margin:279px 95px; } .aur::before, .aur3::before{ content:""; display:block; width:50px; height:12px; background:#525051; border-radius:9px; margin:109px 0px } .aur::after, .aur3::after{ content:""; display:block; width:12px; height:30px; background:#525051; border-radius:9px; margin:-142px 18px } .circ{ position:absolute; width:30px; height:30px; border-radius:100%; background:#979699; border:3px solid #6E6D6D; margin:-223px 7px } .circ::before{ content:""; position:absolute; width:30px; height:30px; border-radius:100%; background:#979699; border:3px solid #6E6D6D; margin:37px -3px } .circ::after{ content:""; position:absolute; width:8px; height:8px; border-radius:100%; background:#251E21; margin:75px 10px } .aur3{ margin:279px 660px;} .compu{ position:absolute; width:221px; height:152px; background:#090012; border:7px solid #463E45; border-radius:6px; margin: 212px 300px } .compu::before{ content:""; display:block; width:261px; height:12px; background:#171126; margin:159px -21px } .compu::after{ content:""; display:block; border-top: 12px solid #120B23; border-left: 30px solid transparent; border-right: 30px solid transparent; height: 0; width: 210px; margin:-160px -25px } .libro{ position:absolute; width:95px; height:21px; border-top:3px solid #7AC48B; border-left:3px solid #7AC48B; border-bottom:3px solid #7AC48B; border-radius:9px; background:#ccc; margin:373px 162px } .cinta{ position:absolute; width:21px; height:21px; background:#F7BB3B; margin:9px 55px; } .cinta::before{ content:""; display:block; width: 0; height: 0; border-top: 12px solid #F7BB3B; border-right: 12px solid transparent; margin:21px 0 } .cinta::after{ content:""; display:block; width: 0; height: 0; border-top: 12px solid #F7BB3B; border-left: 12px solid transparent; margin:-33px 9px } .lampara{ position:absolute; width:60px; height:30px; border-radius:70px 70px 0 0; background:#E35768; margin:343px 182px } .lampara::before{ content:""; display:block; width:9px; height:70px; background:#E35768; margin:-60px 9px; transform:rotate(-35deg); -moz-transform:rotate(-35deg); -webkit-transform:rotate(-35deg); } .lampara::after{ content:""; display:block; width:9px; height:70px; background:#E35768; margin:-117px 13px; transform:rotate(55deg); -moz-transform:rotate(55deg); -webkit-transform:rotate(55deg); } .lamp{ position:absolute; width:40px; height:30px; border-radius:40px 40px 0 0; background:#E35768; margin:231px 221px; transform:rotate(-45deg); -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); animation:va 3s alternate infinite; -moz-animation:va 3s alternate infinite; -webkit-animation:va 3s alternate infinite; } .lamp::before{ content:""; display:block; width:21px; height:12px; border-radius:0 0 12px 12px; background:white; margin:30px 9px } .estante{ position:absolute; width:241px; height:12px; background:#21133D; margin:132px 30px; } .book{ position:absolute; width:83px; height:17px; background:#ccc; border-radius:3px; border-top:3px solid #7FBE8E; border-left:3px solid #7FBE8E; border-bottom:3px solid #7FBE8E; margin:-23px 112px } .book::before{ content:""; position:absolute; width:83px; height:17px; background:#ccc; border-radius:3px; border-top:3px solid #D4634D; border-left:3px solid #D4634D; border-bottom:3px solid #D4634D; margin:-25px -12px } .book::after{ content:""; position:absolute; width:83px; height:17px; background:#ccc; border-radius:3px; border-top:3px solid #F7B33D; border-right:3px solid #F7B33D; border-bottom:3px solid #F7B33D; margin:-47px 0px } .reloj{ position:absolute; width:70px; height:70px; border-radius:100%; background:#3EA3DE; border:9px solid #21133D; margin:30px 373px } .reloj::before{ content:""; display:block; width:3px; height:25px; background:#FCFBFF; margin: 9px 33px } .reloj::after{ content:""; display:block; width:3px; height:33px; background:#FCFBFF; margin: -12px 42px; transform:rotate(-35deg); -moz-transform:rotate(-35deg); -webkit-transform:rotate(-35deg); } .estante3{ position:absolute; width:231px; height:12px; background:#21133D; margin:162px 540px; } .book3{ position:absolute; width:43px; height:75px; background:#3EA3DE; margin:-75px 50px } .book3::before{ content:""; display:block; width:30px; height:30px; background:#ccc; margin:12px 6px; } .book3::after{ content:""; display:block; width:12px; height:12px; border-radius:100%; background:#ccc; margin:12px 14px; } .book7{ position:absolute; width:43px; height:75px; background:#EE4D87; margin:-75px 95px } .book7::before{ content:""; display:block; width:30px; height:30px; background:#ccc; margin:12px 6px; } .book7::after{ content:""; display:block; width:12px; height:12px; border-radius:100%; background:#ccc; margin:12px 14px; } .book9{ position:absolute; width:43px; height:75px; background:#F7B33D;; margin:-75px 140px } .book9::before{ content:""; display:block; width:30px; height:30px; background:#ccc; margin:12px 6px; } .book9::after{ content:""; display:block; width:12px; height:12px; border-radius:100%; background:#ccc; margin:12px 14px; } .colores{ position:absolute; width:12px; height:50px; border-radius:0 0 12px 12px; background:#EE4D87; border-top:2px solid #525051; margin:347px 590px; transform:rotate(-3deg); -moz-transform:rotate(-3deg); -webkit-transform:rotate(-3deg); } .colores::before{ content:""; display:block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid #EE4D87; margin:-14px 0px; } .colores3{ position:absolute; width:12px; height:50px; border-radius:0 0 12px 12px; background:#3EA3DE; border-top:2px solid #525051; margin:347px 600px; transform:rotate(3deg); -moz-transform:rotate(3deg); -webkit-transform:rotate(3deg); } .colores3::before{ content:""; display:block; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-bottom: 12px solid#3EA3DE; margin:-14px 0px; } .cubo{ position:absolute; width:50px; height:21px; border-top:9px solid gray; border-bottom:9px solid gray; margin:360px 575px } .cubo::before{ content:""; display:block; width:5px; height:21px; background:gray; margin:0 6px;} .cubo::after{ content:""; display:block; width:5px; height:21px; background:gray; margin:-21px 40px;} .flores{ position:absolute; border-top: 30px solid #EB805A; border-left: 12px solid transparent; border-right: 12px solid transparent; height: 0; width: 21px; margin:-30px 30px } .flor{ position:absolute; width:21px; height:21px; border-radius:100%; background:#3EA3DE; margin:-50px -12px } .flor::before{ content:""; position:absolute; width:21px; height:21px; border-radius:100%; background:#EE4D87; margin:0px 21px } .flor::after{ content:""; position:absolute; width:21px; height:21px; border-radius:100%; background:#F7B33D; margin:3px 12px } .lamp::after{ content:""; display:block; width: 0; height: 0; border-top: 30px solid transparent; border-right: 192px solid rgba(255,255,255,.2); border-bottom: 30px solid transparent; transform:rotate(90deg); -moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); margin:50px -75px } @keyframes va{ 0%{ transform:rotate(-45deg); -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg);} 100%{ transform:rotate(-112deg); -moz-transform:rotate(-112deg); -webkit-transform:rotate(-112deg);} } @-moz-keyframes va{ 0%{ transform:rotate(-45deg); -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg);} 100%{ transform:rotate(-112deg); -moz-transform:rotate(-112deg); -webkit-transform:rotate(-112deg);} } @-webkit-keyframes va{ 0%{ transform:rotate(-45deg); -moz-transform:rotate(-45deg); -webkit-transform:rotate(-45deg);} 100%{ transform:rotate(-112deg); -moz-transform:rotate(-112deg); -webkit-transform:rotate(-112deg);} }
JAVASCRIPT
Expand for more options Login