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); }
}
