HTML
<div class="container">
<div class="french">
<div class="back"></div>
<div class="fritas">
<div class="f1"></div>
<div class="f2"></div>
<div class="f3"></div>
<div class="f4"></div>
<div class="f5"></div>
<div class="f6"></div>
<div class="f7"></div>
</div>
<div class="front">
<div class="ojo"></div>
<div class="ojo3"></div>
<div class="boca"></div>
</div>
<div class="ket">
<div class="k1"></div>
<div class="k2"></div>
<div class="k3"></div>
</div>
</div>
</div>
CSS
body{
background:black;
}
.container{
position:relative;
width:400px;
height:300px;
background:#ead9bb;
margin:152px auto;
}
.french{
position:absolute;
margin:0 12px
}
.back{
position:absolute;
width:112px;
height:60px;
border-radius:80px 80px 0 0;
background:#ade9ff;
border:3px solid black;
margin:70px 132px
}
.front{
position:absolute;
border-top: 90px solid black;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
height: 0;
width: 93px;
margin:137px 132px
}
.front::before{
content:"";
position:absolute;
border-top: 87px solid #fc4973;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
height: 0;
width: 89px;
margin:-90px -8px
}
.ojo,.ojo3{
position:absolute;
width:21px;
height:21px;
border-radius:100%;
background:black;
animation:cerrar 1.2s alternate infinite;
}
.ojo{margin:-60px 12px}
.ojo3{margin:-60px 60px}
.ojo::before,.ojo3::before{
content:"";
position:absolute;
width:9px;
height:9px;
border-radius:100%;
background:white;
margin:3px 3px
}
.boca{
position:absolute;
width:21px;
height:12px;
border-radius:0 0 21px 21px;
background:black;
margin: -33px 37px
}
.boca::before{
content:"";
position:absolute;
width:9px;
height:5px;
border-radius:0 0 21px 21px;
background:#d63960;
margin: 3px 6px
}
.f1,.f2,.f3,.f4,.f5,.f6,.f7{
position:absolute;
width:12px;
height:70px;
border:1px solid black;
background:#ffdc85;
}
.f1{
border-radius:0 12px 0 0;
transform:rotate(-12deg);
margin:93px 152px
}
.f2{
border-radius:12px 0px 0 0;
margin:80px 162px
}
.f3{
border-radius:12px 0px 0 0;
margin:102px 172px;
}
.f4{
border-radius:0 12px 0 0;
transform:rotate(3deg);
margin:75px 185px
}
.f5{
border-radius:0 12px 0 0;
margin:95px 195px
}
.f6{
border-radius:12px 0px 0 0;
margin:85px 205px;
}
.f7{
border-radius:12px 0px 0 0;
transform:rotate(12deg);
margin:102px 212px;
}
.ket{
position:absolute;
width: 0;
height: 0;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-top: 30px solid #c9084b;
margin:7px 174px
}
.ket::before{
content:"";
position:absolute;
width:28px;
height:9px;
background:#d3214b;
margin:-35px -14px
}
.k1,.k2,.k3{
position:absolute;
width: 9px;
height: 12px;
border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
background:#c9084b;
opacity:0;
}
.k1{
margin:0 -4px;
animation:caer 3s linear infinite;
}
.k2{
margin:0 -4px;
animation:caer3 3s linear infinite;
}
.k3{
margin:0 -4px;
animation:caer7 3s linear infinite;
}
@keyframes cerrar {
0%,25%{opacity:1}
35%{opacity: 0}
50%{opacity:1;}
100%{opacity:1}
}
@keyframes caer {
0%,25%{transform:translateY(0px)}
50%,60%,70%,80%,90%,100%{opacity:1;transform:translateY(70px) }
}
@keyframes caer3 {
0%,25%,50%{transform:translateY(0px) translateX(0)}
60%,70%,80%,90%,100%{opacity:1;transform:translateY(80px) translatex(30px) }
}
@keyframes caer7 {
0%,25%,50%,60%{transform:translateY(0px) translateX(0)}
70%,80%,90%,100%{opacity:1;transform:translateY(80px) translatex(-25px) }
}
