CZZ or CSS??? (Only CSS)

HTML
<div class="container"> <div class="ventana"> <div class="luna"></div> <div class="estrellas"></div> </div> <div class="estantes"> <div class="foto"></div> <ul> <li></li> <li></li> <li></li> </ul> </div> <div class="taza"></div> <div class="flor"></div> <div class="luz"></div> <div class="lamp"></div> <div class="compu"></div> <div class="table"></div> <div class="cara"> <div class="auri"></div> <div class="cejas"></div> <div class="ojos"></div> <div class="ojos7"></div> <div class="swe"></div> <div class="boca"></div> <div class="buble5"> <div class="code"><div class="code3"></div></div> </div> </div> <div class="cat"><div class="leg"></div><div class="cabeza"><div class="eyes"></div><div class="orejas"></div> <div class="buble"> <div class="raton"><div class="ojitos"></div></div> </div></div></div> <div class="cola"> <div class="dog"</div><div class="leg3"></div><div class="cabeza3"><div class="eyes3"></div><div class="orejas3"></div> <div class="buble3"> <div class="cookie"><div class="cookie3"></div></div></div></div> </div>
CSS
body{ background:black; } .container{ position:relative; width:800px; height:600px; background:#001e2f; padding-top:30px; margin:231px auto; } .luz{ position:absolute; width: 0; height: 0; border-left: 63px solid transparent; border-right: 63px solid transparent; border-bottom: 300px solid rgba(255, 255, 255, .12); margin:30px 343px; } .table{ position:relative; width:60%; height:172px; background: #d37b50; border-top:12px solid #b76333; border-bottom:12px solid #b76333; margin:400px auto; } .ventana{ position:absolute; width:201px; height:251px; background:#0e1012; margin:50px 550px; border:12px solid #555; } .ventana::before{ content:""; display:block; width:201px; height:9px; background: #555; margin:7px 0px; } .ventana::after{ content:""; display:block; width:201px; height:9px; background: #555; margin:0px 0px; } .luna{ position:absolute; width:50px; height:50px; border-radius:100%; background:white; margin:45px 45px; } .luna::before{ content:""; display:block; width:50px; height:9px; border-radius:21px; background:#1b253b; margin:55px 0px } .luna::after{ content:""; display:block; width:50px; height:9px; border-radius:21px; background:#1b253b; margin:-60px 12px; } .estrellas{ position:absolute; width:7px; height:7px; border-radius:100%; background:white; margin:30px 30px; } .estrellas::before{ content:""; display:block; width:7px; height:7px; border-radius:100%; background:white; margin:121px 90px; } .estrellas::after{ content:""; display:block; width:7px; height:7px; border-radius:100%; background:white; margin:-221px 132px; } .compu{ position:absolute; width:172px; height:102px; background:#121212; border-r7adius:12px; margin:291px 321px; z-index:3; } .compu::before{ content:""; display:block; width:172px; height:7px; background:#212121; border-radius:12px; margin:102px 0px } .compu::after{ content:""; display:block; width:12px; height:12px; border-radius:100%; border:3px solid #e90757; margin:-172px 77px; } .cara::before{ content:""; display:block; width:90px; height:45px; border-radius: 90px 90px 0 0; background:#ff9900; margin:-45px 3px; } .cara{ position:absolute; width:95px; height:121px; background:#ff9900; border-radius: 0 0 90px 90px; margin:-780px 359px; animation: sube12 3s alternate infinite; -moz-animation: sube12 3s alternate infinite; -webkit-animation: sube12 3s alternate infinite; } .cara::after{ content:""; display:block; width:90px; height:50px; border-radius:0 0 90px 90px; background:#ffe0bd; margin:50px 2px; } .cejas{ position:absolute; width:19px; height:7px; border-radius:12px 12px 0 0; border-top:2px solid black; margin:60px 14px } .cejas::before{ content:""; display:block; width:19px; height:7px; border-radius:12px 12px 0 0; border-top:2px solid black; margin:-3px 45px } .ojos{ position:absolute; width:12px; height:9px; border-radius:100%; background:#b95835; margin:65px 17px; animation: sube5 3s alternate infinite; -moz-animation: sube5 3s alternate infinite; -webkit-animation: sube5 3s alternate infinite; } .ojos7{ position:absolute; width:12px; height:9px; border-radius:100%; background:#b95835; margin:65px 63px; animation: sube5 3s alternate infinite; -moz-animation: sube5 3s alternate infinite; -webkit-animation: sube5 3s alternate infinite; } .boca{ position:absolute; width:12px; height:6px; border-radius:0 0 12px 12px; background:#ff3333; margin:90px 40px } .boca::before{ content:""; display:block; border-bottom: 12px solid #ffe0bd; border-left: 3px solid transparent; border-right: 3px solid transparent; height: 0; width: 12px; margin:9px -3px } .boca::after{ content:""; display:block; width: 0; height: 0; border-left: 9px solid transparent; border-right:9px solid transparent; border-top: 16px solid #ffe0bd; margin:-9px -3px } .swe{ position:absolute; width:90px; height:45px; border-radius:90px 90px 0 0; background:#00b7c8; margin:102px 2px; } .auri{ position:absolute; width:90px; height:45px; border-radius:90px 90px 0 0; border-top:9px solid #00b7c8; margin:3px 3px; } .auri::before{ content:""; display:block; width:9px; height:30px; border-radius:12px; background:#00b7c8; margin: 21px -9px; } .auri::after{ content:""; display:block; width:9px; height:30px; border-radius:12px; background:#00b7c8; margin: -50px 90px; } .lamp{ position:absolute; width:12px; height:50px; background:#555; margin: -30px 50%; } .lamp::before{ content:""; display:block; width:112px; height:60px; border-radius:112px 112px 0 0; background:#ff5555; margin:30px -50px; } .lamp::after{ content:""; display:block; width:30px; height:16px; border-radius: 0 0 30px 30px; background:rgba(255,255,255,.9); margin:-30px -9px } .estantes{ position:absolute; width:132px; height:9px; background:#d37b50; margin: 212px 50px; border-bottom:3px solid #b76333; } .estantes::before{ content:""; display:block; width:132px; height:9px; background:#d37b50; margin:50px 0px; border-bottom:3px solid #b76333; } .foto{ position:absolute; width:45px; height:35px; border-radius:3px; background:lightblue; border:3px solid #555; margin:-155px 40px; } .foto::before{ content:""; display:block; width:12px; height:12px; border-radius:100%; background:orange; margin:9px 5px } .foto::after{ content:""; display:block; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 30px solid green; margin:-27px 16px } ul{ position:absolute; width:90px; height:35px; list-style:none; margin:-93px -9px; } ul li{ display:inline-block; width:21px; height:30px; margin:-3px 0px } ul li:nth-child(1){ background:lightblue; border-bottom:2px solid pink; } ul li:nth-child(2){ background:pink; border-bottom:2px solid lightblue; } ul li:nth-child(3){ background:gray; border-bottom:2px solid white; } .taza{ position:absolute; width:35px; height:40px; border-radius: 0 0 9px 9px; background: #8c489f; margin:360px 545px } .taza::before{ content:""; display:block; width: 12px; height:12px; border:3px solid #8c489f; border-radius:9px; margin:9px 30px } .flor{ position:absolute; border-top: 30px solid #aaf300; border-left: 12px solid transparent; border-right: 12px solid transparent; height: 0; width: 25px; margin:370px 212px; } .flor::before{ content:""; display:block; width:9px; height:35px; background:brown; margin:-65px 9px; } .flor::after{ content:""; display:block; width:50px; height:50px; border-radius:100%; background:#ff8000; margin: 0 -12px; } .cat{ position:absolute; width:70px; border-radius: 55px 55px 0 0; height:35px; background:#333; margin: -721px 630px; } .cabeza{ position:absolute; width:45px; height: 35px; border-radius:100%; background:#333; border:1px solid gray; margin: -3px -12px; animation: sube 3s alternate infinite; -moz-animation: sube 3s alternate infinite; -webkit-animation: sube 3s alternate infinite; } .cat::after{ content:""; display:block; width:12px; height:50px; border-radius: 30px; background:#333; margin: 21px 57px; } .eyes{ position:absolute; width: 14px; height:12px; border-radius:100%; border-bottom: 3px solid black; margin: 7px 5px; } .eyes::before{ content:""; display:block; width: 14px; height:12px; border-radius:100%; border-bottom: 3px solid black; margin: 0px 19px; } .eyes::after{ content:""; display:block; width: 0; height: 0; border-left: 5px solid transparent; border-right:5px solid transparent; border-top: 5px solid black; margin: 5px 12px; } .orejas{ position:absolute; width: 0; height: 0; border-top: 16px solid #212121; border-right: 16px solid transparent; margin: 0px -3px; } .orejas::before{ content:""; display:block; width: 0; width: 0; height: 0; border-top: 16px solid #212121; border-left: 16px solid transparent; margin: -16px 33px; } .leg{ position:absolute; width:21px; height:7px; border-radius: 9px; background:#333; margin: 28px -7px; } .dog{ position:absolute; width:90px; border-radius: 55px 55px 0 0; height:45px; background:brown; margin: -30px -30px; z-index:3; } .cabeza3{ position:absolute; width:60px; height: 50px; border-radius:100%; background:brown; border-right:1px solid #b95835; border-bottom:1px solid #b95835; border-left:1px solid #b95835; margin:0px -12px; animation: sube3 3s alternate infinite; -moz-animation: sube3 3s alternate infinite; -webkit-animation: sube3 3s alternate infinite; } .leg3{ position:absolute; width:45px; height:12px; border-radius: 45px 0 0px 45px; background:brown; border-top:1px solid #b95835; margin: 30px -40px; } .orejas3{ position:absolute; width: 13px; height: 55px; background:black; border-radius:100%; margin: 3px 0px; } .orejas3::before{ content:""; display:block; width: 13px; height: 55px; background:black; border-radius:100%; margin: 0px 47px; } .cola{ position:absolute; width:112px; height:12px; border-radius: 30px; background:black; margin:-430px 400px; } .eyes3{ position:absolute; width: 16px; height:12px; border-radius:100%; border-bottom: 3px solid black; margin: 16px 12px; } .eyes3::before{ content:""; display:block; width: 16px; height:12px; border-radius:100%; border-bottom: 3px solid black; margin: 0px 19px; } .eyes3::after{ content:""; display:block; width:12px; height:7px; background:black; border-radius:100%; margin: 9px 12px; } .buble{ position:absolute; width:70px; height:65px; border-radius:100%; background:lightblue; margin:-102px 50px; } .buble::before{ content:""; display:block; width:17px; height:16px; border-radius:100%; background:lightblue; margin:55px -12px } .buble::after{ content:""; display:block; width:9px; height:9px; border-radius:100%; background:lightblue; margin:-53px -21px; } .raton{ position:absolute; width:35px; height:21px; border-radius:40px 40px 0 0; background:#555; margin:-102px 16px } .raton::before{ content:""; display:block; top: 0; left: 0; width: 21px; height: 21px; background:gray; -moz-border-radius: 50px 50px 0 50px; border-radius: 50px 50px 0 50px; -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); margin:-5px 9px; } .raton::after{ content:"S"; display:block; font-family:verdana; font-weight:700; color:gray; margin:3px 37px; -webkit-transform: rotate(-95deg); -moz-transform: rotate(-95deg); transform: rotate(-95deg); } .ojitos{ position:absolute; width:12px; height:12px; border-radius:100%; background:white; margin: -5px 0px; } .ojitos::before{ content:""; display:block; width:9px; height:9px; border-radius:100%; background:black; margin: 0px 0px; } .buble3{ position:absolute; width:70px; height:65px; border-radius:100%; background:pink; margin:-102px -75px; } .buble3::before{ content:""; display:block; width:17px; height:16px; border-radius:100%; background:pink; margin:55px 70px } .buble3::after{ content:""; display:block; width:9px; height:9px; border-radius:100%; background:pink; margin:-53px 90px; } .cookie{ position:absolute; width:14px; height:35px; border-radius:12px; background:#b76333; margin:-112px 27px; } .cookie::before{ content:""; display:block; width:17px; height:17px; border-radius:100%; background:#b76333; margin:-3px -7px } .cookie::after{ content:""; display:block; width:17px; height:17px; border-radius:100%; background:#b76333; margin:-17px 5px } .cookie3{ position:absolute; width:17px; height:17px; border-radius:100%; background:#b76333; margin:12px -7px } .cookie3::before{ content:""; display:block; width:17px; height:17px; border-radius:100%; background:#b76333; margin:0px 12px } .buble5{ position:absolute; width:102px; height:102px; border-radius:100%; background:white; margin:-162px 121px; } .buble5::before{ content:""; display:block; width:21px; height:19px; border-radius:100%; background:white; margin:95px -12px } .buble5::after{ content:""; display:block; width:12px; height:12px; border-radius:100%; background:white; margin:-93px -33px; } .code{ position:absolute; width:70px; height:7px; background:lightblue; border-radius:9px; margin:-182px 12px; } .code::before{ content:""; display:block; width:50px; height:7px; background:pink; border-radius:9px; margin:9px 0px; } .code::after{ content:"ZZZ"; display:block; width:30px; height:9px; color:gray; font-family:verdana; font-size:14px; font-weight:700; border-radius:9px; margin:-9px 21px; } .code3{ position:absolute; width:70px; height:7px; background:pink; border-radius:9px; margin:16px 12px; } .code3::before{ content:""; display:block; width:50px; height:7px; background:lightblue; border-radius:9px; margin:12px 12px; } @-webkit-keyframes sube { 0% {margin-top: -3px; } 100% {margin-top: -5px; } } @-moz-keyframes sube { 0% {margin-top: -3px; } 100% {margin-top: -5px; } } @keyframes sube { 0% {margin-top: -3px; } 100% {margin-top: -5px; } } @-webkit-keyframes sube3{ 0% { margin-top: 0px; } 100% { margin-top: -3px; } } @-moz-keyframes sube3{ 0% { margin-top: 0px; } 100% { margin-top: -3px; } } @keyframes sube3{ 0% { margin-top: 0px; } 100% { margin-top: -3px; } } @-webkit-keyframes sube5{ 0% {height: 9px;margin-top:65px;} 25%{height: 9px; margin-top:65px;} 35%{height: 6px;margin-top:67px;} 50%{height: 6px;margin-top:67px;} 60%{height: 6px;margin-top:67px;} 70%{height: 3px;margin-top:73px;} 75%{height: 3px;margin-top:73px;} 95%{height: 3px;margin-top:73px;} 100% {margin-top: 3px; margin-top:73px;}} @-moz-keyframes sube5{ 0% {height: 9px;margin-top:65px;} 25%{height: 9px; margin-top:65px;} 35%{height: 6px;margin-top:67px;} 50%{height: 6px;margin-top:67px;} 60%{height: 6px;margin-top:67px;} 70%{height: 3px;margin-top:73px;} 75%{height: 3px;margin-top:73px;} 95%{height: 3px;margin-top:73px;} 100% {margin-top: 3px; margin-top:73px;}} @keyframes sube5{ 0% {height: 9px;margin-top:65px;} 25%{height: 9px; margin-top:65px;} 35%{height: 6px;margin-top:67px;} 50%{height: 6px;margin-top:67px;} 60%{height: 6px;margin-top:67px;} 70%{height: 3px;margin-top:73px;} 75%{height: 3px;margin-top:73px;} 95%{height: 3px;margin-top:73px;} 100% {margin-top: 3px; margin-top:73px;}} @-webkit-keyframes sube7{ 0% {height: 9px;} 25%{height: 9px;} 35%{height: 6px;} 50%{height: 6px;} 60%{height: 6px;} 70%{height: 3px;} 75%{height: 3px;} 95%{height: 3px;} 100% {height: 3px;}} @-moz-keyframes sube7{ 0% {height: 9px;} 25%{height: 9px;} 35%{height: 6px;} 50%{height: 6px;} 60%{height: 6px;} 70%{height: 3px;} 75%{height: 3px;} 95%{height: 3px;} 100% {height: 3px;}} @keyframes sube7{ 0% {height: 9px;} 25%{height: 9px;} 35%{height: 6px;} 50%{height: 6px;} 60%{height: 6px;} 70%{height: 3px;} 75%{height: 3px;} 95%{height: 3px;} 100% {height: 3px;}} @-webkit-keyframes sube12{ 0% {margin-top:-780px;} 25%{margin-top:-780px;} 35%{margin-top:-776px;} 50%{margin-top:-776px;} 60%{margin-top:-776px;} 70%{margin-top:-773px;} 75%{margin-top:-773px;} 95%{margin-top:-773px;} 100% {margin-top:-773px;}} @-moz-keyframes sube12{ 0% {margin-top:-780px;} 25%{margin-top:-780px;} 35%{margin-top:-776px;} 50%{margin-top:-776px;} 60%{margin-top:-776px;} 70%{margin-top:-773px;} 75%{margin-top:-773px;} 95%{margin-top:-773px;} 100% {margin-top:-773px;}} @keyframes sube12{ 0% {margin-top:-780px;} 25%{margin-top:-780px;} 35%{margin-top:-776px;} 50%{margin-top:-776px;} 60%{margin-top:-776px;} 70%{margin-top:-773px;} 75%{margin-top:-773px;} 95%{margin-top:-773px;} 100% {margin-top:-773px;}}
JAVASCRIPT
Expand for more options Login