CSS
body{
background:black;
}
.container{
position:relative;
width:800px;
height:600px;
background:#a8caed;
margin:90px auto;
}
.dis{
position:absolute;
width:271px;
height:350px;
background:#eaeaea;
border-left:9px solid white;
border-right:9px solid white;
margin:121px 261px;
overflow:hidden;
}
.line{
position:absolute;
width:7px;
height:350px;
background:#ccc;
margin:0 112px
}
.line::before{
content:"";
position:absolute;
width:12px;
height:112px;
background:#ccc;
border-radius:12px;
margin:121px -30px
}
.line::after{
content:"";
position:absolute;
width:12px;
height:112px;
background:#ccc;
border-radius:12px;
margin:122px 17px
}
.cuadrado{
position:absolute;
width:90px;
height:90px;
border-top:12px solid #ccc;
border-right:6px solid #f9f9f9;
border-left:6px solid #ccc;
border-bottom:3px solid #ccc;
margin: 112px 152px;
overflow:hidden;
}
.botones{
position:absolute;
width:21px;
height:6px;
background:#d0378c;
border-radius:3px;
margin:12px 9px;
}
.botones::before{
content:"";
display:block;
width:21px;
height:6px;
background:#29abe1;
border-radius:3px;
margin:0px 53px;
}
.agua{
position:absolute;
width:7px;
height:53px;
background:#bcddff;
margin:18px 69px;
animation:grow 3s linear infinite;
}
.agua3{
position:absolute;
width:25px;
height:30px;
background:#5db8ed;
margin:85px 60px;
animation:grow3 3s linear infinite;
}
.botella{
position:absolute;
width: 25px;
height:45px;
background:#c9eaf8;
margin:50px 60px;
opacity:.7;
}
.reflejo3{
position:absolute;
width:5px;
height:30px;
background:white;
margin:7px 17px
}
@keyframes grow{
0% {height:0;}
50% {height:60px;}}
@keyframes grow3{
0% {transform: scale(1,0);}
50% {transform: scale(1,3);}
100% {transform: scale(1,3);}
}
