console
<div class="container">
<div class="dog">
<div class="body"><div class="legs3"></div><div class="legs"></div></div>
<div class="head">
<div class="orejas"></div>
<div class="cabeza"><div class="ojos"><div class="iris"></div><div class="iris3"></div><div class="iris4"></div><div class="iris5"></div><div class="iris6"></div><div class="iris7"></div></div><div class="boca"></div><div class="ceja"></div><div class="ceja3"></div></div>
</div>
</div>
<div class="dog3">
<div class="body5">
<div class="legs7"></div>
<div class="legs9"></div>
<div class="cola"></div>
<div class="body3"><div class="legs12"></div><div class="legs21"></div> </div></div>
<div class="head3">
<div class="orejas3"></div>
<div class="orejas5"></div>
<div class="cabeza3"><div class="ojos3"><div class="iris"></div><div class="iris3"></div><div class="iris4"></div><div class="iris5"></div><div class="iris6"></div><div class="iris7"></div></div><div class="boca5"></div><div class="boca3"></div></div>
</div>
</div>
</div>
body{
background:black;
}
.container{
position:relative;
width:800px;
height:600px;
background:white;
margin:132px auto;
}
.dog{
position:absolute;
margin:102px -40px;
animation:shakes .3s alternate infinite;
}
.dog3{
position:absolute;
margin:95px 12px;
transform:scale(.95);
}
.body5{
position:absolute;
animation:rodar .9s alternate infinite;
}
.head,.head3{
position:absolute;
transform-origin:50% 0%;
width:30px;
height:30px;
background:red;
}
.head{
margin:212px 271px;
animation:rotar 3s alternate infinite;
}
.head3{
margin:291px 490px;
animation:rot .9s alternate infinite;
}
.cabeza,.cabeza3{
position:absolute;
width:112px;
height:121px;
border-radius:100%;
background:#CEA690;
border-bottom:7px solid #CE8A65;
border-right:7px solid #CE8A65;
border-left:7px solid #CE8A65;
}
.cabeza{
margin: -90px -50px;
}
.cabeza3{
margin: -70px -50px;
transform:rotate(-73deg)
}
.orejas{
position:absolute;
width:40px;
height:152px;
border-radius:100%;
background:#CEA690;
border:5px solid #CE8A65;
margin:-93px -60px;
transform:rotate(21deg)
}
.orejas::before{
content:"";
position:absolute;
width:40px;
height:152px;
border-radius:100%;
background:#CEA690;
border:5px solid #CE8A65;
margin:-40px 83px;
transform:rotate(-42deg)
}
.ojos{
position:absolute;
width:30px;
height:40px;
border-radius:100%;
background:white;
margin:45px 5px;
transform:rotate(-12deg)
}
.ojos3{
position:absolute;
width:30px;
height:40px;
border-radius:100%;
background:white;
margin:45px 5px;
transform:rotate(-12deg);
animation:cierra .9s alternate infinite;
}
.ojos::before{
content:"";
position:absolute;
width:30px;
height:40px;
border-radius:100%;
background:white;
margin:14px 73px;
transform:rotate(24deg)
}
.ojos3::before{
content:"";
position:absolute;
width:30px;
height:40px;
border-radius:100%;
background:white;
margin:14px 73px;
transform:rotate(24deg)
}
.iris, .iris3{
position:absolute;
width:27px;
height:37px;
border-radius:100%;
background:black;
}
.iris{
transform:rotate(-12deg);
margin: 3px 3px
}
.iris3{
transform:rotate(24deg);
margin: 16px 73px
}
.iris4{
position:absolute;
width:7px;
height:7px;
border-radius:100%;
background:#ccc;
margin:9px 5px;
animation:shake .3s alternate infinite;
}
.iris5{
position:absolute;
width:7px;
height:7px;
border-radius:100%;
background:#ccc;
margin:21px 90px;
animation:shake .3s alternate infinite;
}
.iris6{
position:absolute;
width:9px;
height:9px;
border-radius:100%;
background:#ccc;
margin:25px 7px;
animation:shake .3s alternate infinite;
}
.iris7{
position:absolute;
width:9px;
height:9px;
border-radius:100%;
background:#ccc;
margin:40px 85px;
animation:shake .3s alternate infinite;
}
.boca, .boca3{
position:absolute;
width:25px;
height:55px;
border-radius:100%;
background:#604339;
border:1px solid #442100;
}
.boca{
margin:70px 34px;
animation:sube .9s alternate infinite;
}
.boca3{
transform:rotate(-121deg);
margin:73px 13px;
animation:sube3 .9s alternate infinite;
}
.boca::before,.boca3::before{
content:"";
position:absolute;
width:25px;
height:55px;
border-radius:100%;
background:#604339;
border:1px solid #442100;
}
.boca::before{
margin:-3px 21px;
transform:rotate(-14deg)
}
.boca3::before{
margin:50px -27px;
transform:rotate(-121deg)
}
.boca::after, .boca3::after{
content:"";
position:absolute;
width: 25px;
height: 17px;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#350900;
}
.boca::after{
transform:rotate(-192deg);
margin:-3px 7px
}
.boca3::after{
transform:rotate(-63deg);
margin:50px -3px
}
.boca5{
position:absolute;
width:45px;
height:30px;
border-radius:0 0 45px 45px;
background:#ff6666;
border:7px solid #442100;
margin:83px 27px;
animation:abre .9s alternate infinite;
}
.ceja{
position:absolute;
width: 0;
height: 0;
border-bottom: 12px solid black;
border-right: 45px solid transparent;
transform:rotate(132deg);
margin:33px 0;
animation:rotar3 3s alternate infinite;
}
.ceja3{
position:absolute;
width: 0;
height: 0;
border-bottom: 45px solid black;
border-left: 12px solid transparent;
transform:rotate(121deg);
margin:10px 87px;
animation:rotar5 3s alternate infinite;
}
.body{
position:absolute;
width: 102px;
height: 102px;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#AD877E;
margin:231px 233px
}
.body3{
position:absolute;
width: 112px;
height: 121px;
-webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#AD877E;
margin:241px 545px;
transform:rotate(-95deg);
}
.legs{
position:absolute;
width:25px;
height:60px;
border-radius:30px ;
background:#AD786B;
margin:47px 12px;
transform:rotate(12deg)
}
.legs::before{
content:"";
position:absolute;
width:25px;
height:60px;
border-radius:30px ;
background:#AD786B;
margin:-9px 50px;
transform:rotate(-24deg)
}
.legs3{
position:absolute;
width:112px;
height:73px;
border-radius:100%;
background:#AD877E;
margin:33px -5px
}
.legs3::before,.legs3::after{
content:"";
position:absolute;
width:30px;
height:21px;
border-radius:30px;
background:#AD786B;
}
.legs3::before{
margin:45px -12px
}
.legs3::after{
margin:45px 90px
}
.orejas3,.orejas5{
position:absolute;
width:30px;
height:50px;
background:#CEA690;
border:5px solid #CE8A65;
}
.orejas3{
margin:-3px -33px;
transform:rotate(12deg);
animation:rotar12 .9s alternate infinite;
}
.orejas5{
margin:-90px 0px;
transform:rotate(24deg);
animation:rotar21 .9s alternate infinite;
}
.orejas3::before,.orejas5::before{
content:"";
position:absolute;
width:90px;
height:30px;
border-radius:100%;
background:#CEA690;
border:5px solid #CE8A65;
}
.orejas3::before{
margin:55px -9px;
transform:rotate(21deg)
}
.orejas5::before{
margin:-30px -12px;
transform:rotate(-21deg)
}
.legs7{
position:absolute;
width:25px;
height:50px;
border-radius:30px ;
background:#AA5E4C;
margin:241px 643px;
transform:rotate(33deg);
animation:r1 .9s alternate infinite;
}
.legs7::before{
content:"";
position:absolute;
width:40px;
height:21px;
border-radius:30px ;
background:#AA5E4C;
margin:-12px -12px;
transform:rotate(21deg)
}
.legs9{
position:absolute;
width: 25px;
height: 50px;
background: #AA5E4C;
border-radius: 30px;
margin:219px 570px;
transform:rotate(-12deg);
animation:r3 .9s alternate infinite;
}
.legs9::before{
content:"";
display:block;
width:40px;
height:21px;
border-radius:30px ;
background:#AA5E4C;
margin:-7px 0px
}
.legs12{
position:absolute;
width: 25px;
height: 50px;
background: #AD786B;
border-radius: 30px;
margin:21px 90px;
transform:rotate(90deg);
animation: r4 .9s alternate infinite;
}
.legs12::before{
content:"";
display:block;
width:40px;
height:21px;
border-radius:30px ;
background:#AD786B;
margin:-7px 0px
}
.legs21{
position:absolute;
width:25px;
height:50px;
border-radius:30px ;
background:#AD786B;
margin:80px 70px;
transform:rotate(-30deg);
animation:r2 .9s alternate infinite;
}
.legs21::before{
content:"";
position:absolute;
width:40px;
height:21px;
border-radius:30px ;
background:#AD786B;
margin:30px 3px;
transform:rotate(-9deg)
}
.cola{
position:absolute;
width:121px;
height:102px;
border-radius:100%;
border-bottom:21px solid #AD786B;
margin:221px 600px;
animation:rotar12 .9s alternate infinite;
}
@keyframes rotar{
0%{transform:rotate(7deg)}
100%{transform:rotate(-7deg)}
}
@keyframes rot{
0%{transform:rotate(-12deg)}
100%{transform:rotate(12deg)}
}
@keyframes rotar3 {
0%{transform:rotate(132deg)}
50%{transform:rotate(145deg)}
}
@keyframes rotar5 {
0%{transform:rotate(121deg)}
50%{transform:rotate(112deg)}
}
@keyframes sube{
0%{ margin:70px 34px;}
50%{ margin:65px 34px;}
}
@keyframes sube3{
0%{ margin:73px 13px;}
50%{ margin:70px 13px;}
}
@keyframes shake{
0%{transform:scale(1)}
50%{transform:scale(.90)}
75%{transform:scale(1)}
}
@keyframes r1 {
0%{transform:rotate(33deg) translatey(0px) translatex(0px)}
50%{transform:rotate(-12deg) translatey(-3px) translatex(-12px)}
}
@keyframes r2 {
0%{transform:rotate(-30deg) translatey(0px) translatex(0px)}
50%{transform:rotate(12deg) translatey(12px) translatex(-3px)}
}
@keyframes r3 {
0%{transform:rotate(-9deg) translatey(0px) translatex(0px)}
50%{transform:rotate(-12deg) translatey(9px) translatex(3px)}
}
@keyframes r4 {
0%{transform:rotate(90deg) translatey(0px) translatex(0px)}
50%{transform:rotate(70deg) translatey(-9px) translatex(-3px)}
}
@keyframes abre{
0%{transform:scale(1)}
50%{transform:scale(.7)}
}
@keyframes rotar12{
0%{transform:rotate(12deg)}
50%{transform:rotate(-12deg)}
}
@keyframes rotar21{
0%{transform:rotate(24deg)}
50%{transform:rotate(42deg)}
}
@-webkit-keyframes cierra{
0%,25% {opacity:1;}
45% {opacity:0;}
50%, 65%,75%,85%,95%,100%{opacity:1;}
}
@keyframes rodar{
0%{transform:translatey(-3px)}
100%{transform:translatey(3deg)}
}
@keyframes shakes {
2% {
transform: translate(0px, 0px) rotate(0.5deg); }
4% {
transform: translate(1px, 0px) rotate(0.5deg); }
6% {
transform: translate(0px, 1px) rotate(0.5deg); }
8% {
transform: translate(0px, 0px) rotate(0.5deg); }
10% {
transform: translate(1px, 1px) rotate(0.5deg); }
12% {
transform: translate(0px, 1px) rotate(0.5deg); }
14% {
transform: translate(1px, 0px) rotate(0.5deg); }
16% {
transform: translate(0px, 0px) rotate(0.5deg); }
18% {
transform: translate(0px, 1px) rotate(0.5deg); }
20% {
transform: translate(1px, 0px) rotate(0.5deg); }
22% {
transform: translate(0px, 1px) rotate(0.5deg); }
24% {
transform: translate(1px, 1px) rotate(0.5deg); }
26% {
transform: translate(1px, 0px) rotate(0.5deg); }
28% {
transform: translate(0px, 1px) rotate(0.5deg); }
30% {
transform: translate(0px, 0px) rotate(0.5deg); }
32% {
transform: translate(0px, 1px) rotate(0.5deg); }
34% {
transform: translate(0px, 1px) rotate(0.5deg); }
36% {
transform: translate(0px, 1px) rotate(0.5deg); }
38% {
transform: translate(0px, 0px) rotate(0.5deg); }
40% {
transform: translate(0px, 1px) rotate(0.5deg); }
42% {
transform: translate(1px, 1px) rotate(0.5deg); }
44% {
transform: translate(0px, 1px) rotate(0.5deg); }
46% {
transform: translate(0px, 1px) rotate(0.5deg); }
48% {
transform: translate(1px, 0px) rotate(0.5deg); }
50% {
transform: translate(1px, 0px) rotate(0.5deg); }
52% {
transform: translate(1px, 0px) rotate(0.5deg); }
54% {
transform: translate(0px, 0px) rotate(0.5deg); }
56% {
transform: translate(0px, 1px) rotate(0.5deg); }
58% {
transform: translate(0px, 0px) rotate(0.5deg); }
60% {
transform: translate(0px, 1px) rotate(0.5deg); }
62% {
transform: translate(1px, 0px) rotate(0.5deg); }
64% {
transform: translate(1px, 0px) rotate(0.5deg); }
66% {
transform: translate(1px, 0px) rotate(0.5deg); }
68% {
transform: translate(0px, 0px) rotate(0.5deg); }
70% {
transform: translate(0px, 1px) rotate(0.5deg); }
72% {
transform: translate(1px, 1px) rotate(0.5deg); }
74% {
transform: translate(0px, 1px) rotate(0.5deg); }
76% {
transform: translate(0px, 1px) rotate(0.5deg); }
78% {
transform: translate(0px, 0px) rotate(0.5deg); }
80% {
transform: translate(0px, 1px) rotate(0.5deg); }
82% {
transform: translate(0px, 1px) rotate(0.5deg); }
84% {
transform: translate(0px, 1px) rotate(0.5deg); }
86% {
transform: translate(1px, 1px) rotate(0.5deg); }
88% {
transform: translate(0px, 1px) rotate(0.5deg); }
90% {
transform: translate(0px, 1px) rotate(0.5deg); }
92% {
transform: translate(0px, 1px) rotate(0.5deg); }
94% {
transform: translate(0px, 0px) rotate(0.5deg); }
96% {
transform: translate(1px, 1px) rotate(0.5deg); }
98% {
transform: translate(0px, 1px) rotate(0.5deg); }
0%, 100% {
transform: translate(0, 0) rotate(0); } }