French fries

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) } }
JAVASCRIPT
Expand for more options Login