HTML
<div class="container">
<div class="pens">
<div class="pen1"><div class="l1"></div><div class="ojos"></div><div class="ojos3"></div><div class="boca"></div><div class="arc"></div></div>
<div class="pen2"><div class="l2"></div><div class="ojos"></div><div class="ojos3"></div><div class="boca"></div><div class="arc3"></div></div>
</div>
<div class="cora">
<div class="c1"></div>
<div class="c2"></div>
</div>
<div class="lines">
<div class="lin1"></div>
<div class="lin2"></div>
</div>
</div>
CSS
body{
background:black;
}
.container{
position:relative;
width:400px;
height:300px;
background:#eaeaea;
margin:121px auto;
overflow:hidden;
}
.pen1, .pen2{
position:absolute;
width:40px;
height:90px;
border-radius:30px 30px 0 0;
border:5px solid black;
}
.pen1{
margin:90px -90px;
transform:rotate(12deg);
animation:go 7s linear infinite;
}
.pen2{
margin:90px 430px;
transform:rotate(-12deg);
animation:go3 7s linear infinite;
}
.pen1::before, .pen2::before{
content:"";
position:absolute;
width:30px;
height:90px;
border-radius:30px 30px 0 0;
margin:0px 2px
}
.pen1::before{
background:#ea4da3;
border-right:9px solid #d0378c;
}
.pen2::before{
background:#39aee5;
border-right:9px solid #1ba0e2;
}
.pen1::after,.pen2::after{
content:"";
position:absolute;
width:30px;
height:21px;
border-radius:25px 25px 0 0;
margin:0px 2px
}
.pen1::after{
background:#dd4998;
border-right:9px solid #d0378c;
}
.pen2::after{
background:#3a98e0;
border-right:9px solid #1ba0e2;
}
.l1,.l2{
position:absolute;
width: 0;
height: 0;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
border-top: 35px solid black;
margin:96px -4px
}
.l1::before,.l2::before{
content:"";
position:absolute;
width: 0;
height: 0;
border-left: 21px solid transparent;
border-right: 21px solid transparent;
border-top: 30px solid #f9d5ae;
margin:-36px -21px
}
.l1::after,.l2::after{
content:"";
position:absolute;
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
margin:-16px -8px
}
.l1::after{
border-top: 12px solid #ea4da3;
}
.l2::after{
border-top: 12px solid #39aee5;
}
.ojos,.ojos3{
position:absolute;
width:12px;
height:12px;
border-radius:100%;
background:black;
animation:cerrar .9s alternate infinite;
}
.ojos{margin:50px 5px}
.ojos3{margin:50px 25px}
.ojos::before,.ojos3::before{
content:"";
position:absolute;
width:3px;
height:3px;
border-radius:100%;
background:white;
margin:3px 3px;
}
.boca{
position:absolute;
width:5px;
height:2px;
border-radius:0 0 12px 12px;
border:3px solid black;
margin:65px 16px
}
.arc,.arc3{
position:absolute;
width:12px;
height:17px;
border-radius:100%;
z-index:333;
}
.arc{border-left:3px solid white;
margin:5px 8px;
transform:rotate(33deg);}
.arc3{border-right:3px solid white;
margin:5px 21px;
transform:rotate(-33deg);}
.c1,.c2{
position:absolute;
width:21px;
height:30px;
border-radius:100%;
background:#960142;
transform:rotate(-30deg);
opacity:0;
animation:late 7s linear infinite;
}
.c1{
margin:60px 165px;
transform:rotate(-70deg) scale(.8);
background:#960142;
}
.c2{
margin:50px 195px;
transform:rotate(12deg);
background:#12609b;
}
.c1::before,.c2::before{
content:"";
position:absolute;
width:21px;
height:30px;
border-radius:100%;
transform:rotate(60deg);
margin:5px 7px;
}
.c1:before{background:#960142;}
.c2::before{background:#12609b;}
.lin1,.lin2{
position:absolute;
width:155px;
height:5px;
border-radius:3px;
}
.lin1{
background:#ea4da3;
margin:221px -152px;
animation:go7 7s linear infinite;
}
.lin2{
background:#39aee5;
margin:221px 400px;
animation:go9 7s linear infinite;
}
@keyframes go{
0%,30%{margin:90px -90px;}
40%,50%{margin:90px 142px;}
60%,70%{margin:90px 142px;}
80%,90%{margin:90px 142px;}
100%{margin:90px -90px;}
}
@keyframes go3 {
0%,30%{margin:90px 430px;}
40%,50%{margin:90px 201px;}
60%,70%{margin:90px 201px;}
80%, 90%{margin:90px 201px;}
100%{margin:90px 430px;}
}
@keyframes late{
0%,30%{opacity:0;}
40%,50%{opacity:1;}
60%,70%{opacity:0;}
80%,90%{opacity:1;}
100%{opacity:0;}
}
@keyframes cerrar {
0%,25%{opacity:1}
35%{opacity: 0}
50%{opacity:1;}
100%{opacity:1}
}
@keyframes go7{
0%,30%{transform:translateX(-2px)}
40%,50%{transform:translateX(150px)}
60%,70%{transform:translateX(150px)}
80%,90%{transform:translateX(150px)}
100%{transform:translateX(0px)}
}
@keyframes go9{
0%,30%{transform:translateX(0px)}
40%,50%{transform:translateX(-155px)}
60%,70%{transform:translateX(-155px)}
80%,90%{transform:translateX(-155px)}
100%{transform:translateX(0px)}
}
