Orange juice

HTML
<div class="container"> <div class="juice"> <div class="orange"> <div class="eyes"></div> <div class="eyes3"></div> <div class="boca"></div> </div> <div class="jug"></div> <div class="jug3"></div> <div class="jugo"></div> <div class="jug7"></div> <div class="vaso"><div class="vaso3"><div class="ojos"></div><div class="ojos3"></div><div class="boca3"></div></div><div class="linea"></div></div> </div> </div>
CSS
body{ background:black; } .container{ position:relative; width:400px; height:400px; background:#6d379b; margin:90px auto; } .juice{ position:absolute; margin:50px -21px; } .jug{ position:absolute; width:57px; height:112px; background:rgba(255,255,255, .21); border-left:12px solid rgba(255,255,255, .21); margin:30px 172px } .jug::before{ content:""; position:absolute; width:73px; height:12px; background:rgba(255,255,255, .3); border-left:12px solid rgba(255,255,255, .21); border-radius:30px; margin:-12px -19px; } .jug::after{ content:""; position:absolute; width:132px; height:162px; background:#0780ea; margin:102px -43px; border-radius:21px 21px 0 0; border-bottom: 9px solid #043866; } .jug7{ position:absolute; width:55px; height:35px; border-radius: 0 90px 0 0; transform-origin:50% 50%; background:#0780ea; border-bottom: 9px solid #043866; margin:172px 271px; animation:shake .8s linear infinite; } .orange{ position:absolute; width:65px; height:65px; border-radius:100%; background:#ff8300; margin:-45px 174px; animation:baja 9s linear infinite forwards; } .eyes,.eyes3{ position:absolute; width:17px; height:17px; border-radius:100%; background:black; animation:abre 1.2s alternate infinite; } .eyes{margin:25px 9px} .eyes3{margin:25px 40px} .eyes::before, .eyes3::before{ content:""; position:absolute; width:7px; height:7px; border-radius:100%; background:white; margin:3px 3px } .boca{ position:absolute; width:12px; height:12px; border-radius:100%; background:#f40750; margin:40px 27px } .jugo{ position:absolute; width:12px; height:102px; border-radius:12px; background:#ff8300; margin:190px 297px; animation:baja3 9s linear infinite; } .vaso{ position:absolute; width:43px; height:70px; background: rgba(255,255,255, .21); margin:233px 281px; overflow:hidden; } .vaso3{ position:absolute; width:35px; height:55px; background:#ff8300; opacity:.9; margin:70px 4px; animation:sube 9s linear infinite; } .linea{ position:absolute; width:7px; height:70px; background: rgba(255,255,255, .3); margin:0px 0px; } .ojos,.ojos3{ position:absolute; width:12px; height:12px; border-radius:100%; background:black; animation:abre 1.2s alternate infinite; } .ojos{margin:21px 0px} .ojos3{margin:21px 23px} .ojos::before, .ojos3::before{ content:""; position:absolute; width:3px; height:3px; border-radius:100%; background:white; margin:3px 3px } .boca3{ position:absolute; width:9px; height:6px; border-radius: 0 0 12px 12px; background:#f40750; margin:35px 12px; } @keyframes baja{ 0%{transform:translateY(0) translateX(0);} 50%, 60%, 70%, 80%, 90%,100%{transform:translateY(212px) translateX(0);} } @keyframes baja3 { 0%,50%,60%{height:0px} 70%,80%{height:112px} 90%,100%{height:0px} } @keyframes sube { 0%,50%,60%,70% {transform:translateY(0)} 80%, 90%,100%{transform:translateY(-58px)}} @keyframes abre{ 0%,25%{opacity:1} 35%{opacity: 0} 50%{opacity:1;} 100%{opacity:1} } @keyframes shake { 0% { transform: translate(2px, 1px) rotate(0deg); } 10% { transform: translate(-1px, -2px) rotate(-1deg); } 20% { transform: translate(-3px, 0px) rotate(1deg); } 30% {transform: translate(0px, 2px) rotate(0deg); } 40% {transform: translate(1px, -1px) rotate(1deg); } 50% {transform: translate(-1px, 2px) rotate(-1deg); } 60% {transform: translate(-3px, 1px) rotate(0deg); } 70% {transform: translate(2px, 1px) rotate(-1deg); } 80% {transform: translate(-1px, -1px) rotate(1deg); } 90% {transform: translate(2px, 2px) rotate(0deg); } 100% {transform: translate(1px, -2px) rotate(-1deg); } }
JAVASCRIPT
Expand for more options Login