Just an illusion.... (Only CSS)

HTML
<section> <div class="raton"><div class="ojos"><div class="ojito"></div></div></div> <div class="compu"> <div class="brow"> <div class="cat"> <div class="body3"> <div class="leg3"></div> <div class="cola3"></div> </div> <div class="cabeza3"> <div class="ojos3"><div class="iris3"></div></div> <div class="bigotes"></div> <div class="bigotes3"></div> </div> </div> </section>
CSS
body{ background:#212121; } section{ width:800px; height: 600px; background:#121212; position:relative; margin:271px auto; overflow:hidden; } .raton{ position:absolute; width: 97px; height:50px; border-radius: 100px 100px 0 0; background:gray; margin: 430px -100px; animation:rat 12s linear infinite; -moz-animation:rat 12s linear infinite; -webkit-animation:rat 12s linear infinite; } .raton::before{ content:""; display:block; width:50px; height:50px; border-radius: 100px 0 100px 100px; background:#333; border:3px solid gray; transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); margin:-21px 7px; } .raton::after{ content:"S"; display:block; font-family: Verdana; color:gray; font-size:3em; transform: rotate(45deg); -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); margin:60px -55px; } .ojos{ position:absolute; width:25px; height:25px; border-radius:100%; background: white; margin: -12px 65px; } .ojito{ position:absolute; display:block; width:16px; height:16px; border-radius:100%; background:black; margin:0px 7px; animation:uyuy 12s linear infinite; -moz-animation:uyuy 12s linear infinite; -webkit-animation:uyuy 12s linear infinite; } .compu{ position:absolute; width:312px; height:192px; border-radius: 12px; border:12px solid #333; margin:121px 241px; } .compu::before{ content:""; display:block; width: 21px; height:21px; background:#333; margin: 201px 142px; } .compu::after{ content:""; display:block; width: 50px; height:9px; background:#333; margin:-201px 127px; } .brow{ position:absolute; width:312px; height: 192px; background:white; margin: -422px 0px; opacity:0; animation:on3 12s linear infinite; -moz-animation:on3 12s linear infinite; -webkit-animation:on3 12s linear infinite; } .cat{ position:absolute; margin:30px -30px; } .body3{ position:absolute; width:80px; height:60px; border-radius:100%; background:black; margin: 30px 142px } .body3::before{ content:""; display:block; border-top: 30px solid black; border-left: 12px solid transparent; border-right: 12px solid transparent; height: 0; width: 50px; margin:40px 3px; } .body3::after{ content:""; display:block; width:65px; height:30px; border-radius:50px 50px 0 0; background:white; margin:-50px 7px } .cabeza3{ position:absolute; width:73px; height:57px; border-radius:100%; background:black; margin: 93px 145px; animation:sube 3s linear infinite; -moz-animation:sube 3s linear infinite; -webkit-animation:sube 3s linear infinite; } .cabeza3::before{ content:""; display:block; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 21px solid black; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -moz-transform:rotate(-45deg); margin:-3px -9px; } .cabeza3::after{ content:""; display:block; width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-bottom: 21px solid black; transform:rotate(45deg); -webkit-transform:rotate(45deg); -moz-transform:rotate(45deg); margin:-21px 58px; } .ojos3{ position:absolute; width:21px; height:21px; border-radius:100%; background:white; margin:9px 9px; } .ojos3::before{ content:""; display:block; width:21px; height:21px; border-radius:100%; background:white; margin:0px 34px; } .iris3{ position:absolute; width:5px; height:12px; border-radius:100%; background:black; margin:-12px 3px; animation:ve 12s linear infinite; -moz-animation:ve 12s linear infinite; -webkit-animation:ve 12s linear infinite; } .iris3::before{ content:""; position:absolute; width:5px; height:12px; border-radius:100%; background:black; margin:0px 33px } .ojos3::after{ content:""; position:absolute; width:9px; height:7px; border-radius:100%; background:white; margin: 0px 23px; } .leg3{ position:absolute; width:30px; height:14px; border-radius:30px 30px 0 0; background:black; margin:3px 0; } .leg3::before{ content:""; position:absolute; width:30px; height:14px; border-radius:30px 30px 0 0; background:black; margin:0px 49px; } .cola3{ position:absolute; width:17px; height:70px; border-radius:12px; background:black; margin:-162px 33px; transform-origin:0% 50%; -moz-transform-origin:0% 50%; -webkit-transform-origin:0% 50%; animation:gira .9s alternate infinite; -moz-animation:gira .9s alternate infinite; -webkit-animation:gira .9s alternate infinite; } @-moz-keyframes gira{ 0%{ transform:rotate(-12deg); -moz-transform:rotate(-12deg); -webkit-transform:rotate(-12deg); } 100%{ transform:rotate(12deg); -moz-transform:rotate(12deg); -webkit-transform:rotate(12deg); } } @-webkit-keyframes gira{ 0%{ transform:rotate(-12deg); -moz-transform:rotate(-12deg); -webkit-transform:rotate(-12deg); } 100%{ transform:rotate(12deg); -moz-transform:rotate(12deg); -webkit-transform:rotate(12deg); } } @keyframes ve{ 0%{margin:-12px 3px;} 35%{margin:-12px 5px;} 50%,60%{margin:-12px 8px;} 65%,100%{margin:-12px 12px;} } @-moz-keyframes ve{ 0%{margin:-12px 3px;} 35%{margin:-12px 5px;} 50%,60%{margin:-12px 8px;} 65%,100%{margin:-12px 12px;} } @-webkit-keyframes ve{ 0%{margin:-12px 3px;} 35%{margin:-12px 5px;} 50%,60%{margin:-12px 8px;} 65%,100%{margin:-12px 12px;} } @keyframes rat{ 0% {left:0px;} 25% {left: 312px;} 50% {left: 450px;} 60% {left: 450px;} 65% {left: 1200px;} 75% {left: 1200px; } 100% {left: 1200px;} } @-moz-keyframes rat{ 0% {left:0px;} 25% {left: 312px;} 50% {left: 450px;} 60% {left: 450px;} 65% {left: 1200px;} 75% {left: 1200px; } 100% {left: 1200px; } } @-webkit-keyframes rat{ 0% {left:0px;} 25% {left: 312px;} 50% {left: 450px;} 60% {left: 450px;} 65% {left: 1200px; } 75% {left: 1200px; } 100% {left: 1200px; } } @keyframes uyuy{ 0% {margin:0px 7px} 35% {margin: 3px 3px} 50% {margin: -3px 6px;-moz-transform: scale(.5); -webkit-transform: scale( .5);transform: scale( .5)} 55%{margin: 3px 6px; -moz-transform: scale(1.2);-webkit-transform: scale( 1.2);transform: scale( 1.2)} 60% { margin:3px 6px;-moz-transform: scale(.7); -webkit-transform: scale(.7); transform: scale(.7);} 75%,100% { -moz-transform: scale(1); -webkit-transform: scale( 1); transform: scale( 1);} } @-moz-keyframes uyuy{ 0% {margin:0px 7px} 35% {margin: 3px 3px} 50% {margin: -3px 6px;-moz-transform: scale(.5); -webkit-transform: scale( .5);transform: scale( .5)} 55%{margin: 3px 6px; -moz-transform: scale(1.2);-webkit-transform: scale( 1.2);transform: scale( 1.2)} 60%,70% { margin:3px 6px;-moz-transform: scale(.7); -webkit-transform: scale(.7); transform: scale(.7);} 75%,100% { -moz-transform: scale(1); -webkit-transform: scale( 1); transform: scale( 1);} } @-webkit-keyframes uyuy{ 0% {margin:0px 7px} 35% {margin: 3px 3px} 50% {margin: -3px 6px;-moz-transform: scale(.5); -webkit-transform: scale( .5);transform: scale( .5)} 55%{margin: 3px 6px; -moz-transform: scale(1.2);-webkit-transform: scale( 1.2);transform: scale( 1.2)} 60% { margin:3px 6px;-moz-transform: scale(.7); -webkit-transform: scale(.7); transform: scale(.7);} 75%,100% { -moz-transform: scale(1); -webkit-transform: scale( 1); transform: scale( 1);} } @keyframes on{ 0% {opacity:0;} 25% {opacity:0;} 50% {opacity:.3;} 60% {opacity:1;} 65% {opacity:1;} 75% {opacity:1; } 100% {opacity:0;} } @-webkit-keyframes uyuy{ 0% {margin:0px 7px} 35% {margin: 12px 3px;} 50% {margin: -3px 6px;-moz-transform: scale(.5); -webkit-transform: scale( .5); transform: scale( .5);} 55%{margin: 3px 6px; -moz-transform: scale(1.2); -webkit-transform: scale( 1.2); transform: scale( 1.2);} 60% { margin:5px 6px};-moz-transform: scale(.7); -webkit-transform: scale(.7); transform: scale(.7);} 75%,100% { -moz-transform: scale(1); -webkit-transform: scale( 1); transform: scale( 1);} } @keyframes on3{ 0% {opacity:0;} 25% {opacity:0;} 50% {opacity:.3;} 60% {opacity:1;} 65% {opacity:1;} 75% {opacity:1; } 100% {opacity:0;} } @-moz-keyframes on3{ 0% {opacity:0;} 25% {opacity:0;} 50% {opacity:.3;} 60% {opacity:1;} 65% {opacity:1;} 75% {opacity:1; } 100% {opacity:0;} } @-webkit-keyframes on3{ 0% {opacity:0;} 25% {opacity:0;} 50% {opacity:.3;} 60% {opacity:1;} 65% {opacity:1;} 75% {opacity:1; } 100% {opacity:0;} }
JAVASCRIPT
Expand for more options Login