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;}
}
