CSS
body{
background:#ff5c5c;
}
.contenedor{
position:relative;
width:500px;
height:700px;
margin: 212px auto;
background:#ff5c5c;
}
.bidon{
position:absolute;
width:132px;
height:182px;
background:rgba(255,255,255,.5);
border-radius:40px;
margin:30px 192px;
}
.bidon::before{
content:"";
display:block;
width:127px;
height:121px;
background: rgba(93,184,237,.7);
border-radius:0 0 40px 40px;
margin:58px 3px;
}
.bidon::after{
content:"";
display:block;
width:40px;
height:12px;
background: rgba(51,156,204,1);
background: -moz-linear-gradient(left, rgba(51,156,204,1) 0%, rgba(51,156,204,1) 40%, rgba(2,140,209,1) 40%, rgba(2,140,209,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(51,156,204,1)), color-stop(40%, rgba(51,156,204,1)), color-stop(40%, rgba(2,140,209,1)), color-stop(100%, rgba(2,140,209,1)));
background: -webkit-linear-gradient(left, rgba(51,156,204,1) 0%, rgba(51,156,204,1) 40%, rgba(2,140,209,1) 40%, rgba(2,140,209,1) 100%);
background: -o-linear-gradient(left, rgba(51,156,204,1) 0%, rgba(51,156,204,1) 40%, rgba(2,140,209,1) 40%, rgba(2,140,209,1) 100%);
background: -ms-linear-gradient(left, rgba(51,156,204,1) 0%, rgba(51,156,204,1) 40%, rgba(2,140,209,1) 40%, rgba(2,140,209,1) 100%);
background: linear-gradient(to right, rgba(51,156,204,1) 0%, rgba(51,156,204,1) 40%, rgba(2,140,209,1) 40%, rgba(2,140,209,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#339ccc', endColorstr='#028cd1', GradientType=1 );
margin:307px 47px;
}
.bidon3{
position:absolute;
width:132px;
height:182px;
background:rgba(255,255,255,.5);
border-radius:40px;
margin:330px -21px;
}
.bidon3::before{
content:"";
position:absolute;
width:12px;
height:112px;
background:rgba(255, 255, 255, .5);
margin:35px 102px
}
.bidon3::after{
content:"";
display:block;
width:40px;
height:12px;
background: rgba(51,156,204,1);
background: -moz-linear-gradient(left, rgba(51,156,204,1) 0%, rgba(51,156,204,1) 40%, rgba(2,140,209,1) 40%, rgba(2,140,209,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(51,156,204,1)), color-stop(40%, rgba(51,156,204,1)), color-stop(40%, rgba(2,140,209,1)), color-stop(100%, rgba(2,140,209,1)));
background: -webkit-linear-gradient(left, rgba(51,156,204,1) 0%, rgba(51,156,204,1) 40%, rgba(2,140,209,1) 40%, rgba(2,140,209,1) 100%);
background: -o-linear-gradient(left, rgba(51,156,204,1) 0%, rgba(51,156,204,1) 40%, rgba(2,140,209,1) 40%, rgba(2,140,209,1) 100%);
background: -ms-linear-gradient(left, rgba(51,156,204,1) 0%, rgba(51,156,204,1) 40%, rgba(2,140,209,1) 40%, rgba(2,140,209,1) 100%);
background: linear-gradient(to right, rgba(51,156,204,1) 0%, rgba(51,156,204,1) 40%, rgba(2,140,209,1) 40%, rgba(2,140,209,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#339ccc', endColorstr='#028cd1', GradientType=1 );
margin:-12px 47px;
}
.reflejo{
position:absolute;
width:12px;
height:85px;
background:rgba(255, 255, 255, .5);
margin:-162px 102px
}
ul.crestas{
position:relative;
width:152px;
height:21px;
list-style:none;
margin:-191px -30px;
animation:va .9s alternate infinite;
-moz-animation:va .9s alternate infinite;
-webkit-animation:va .9s alternate infinite;
}
ul.crestas li{
display:inline-block;
width:21px;
height:12px;
border-radius: 12px 12px 0 0;
background: rgba(93,184,237,.7);
margin:7px -4px;
}
ul.crestas li:first-child{
margin-left:-5px;
}
.dis{
position:absolute;
width:132px;
height:291px;
background:white;
margin:221px 192px;
overflow:hidden;
}
.cuadrado{
position:absolute;
display:block;
width:90px;
height:90px;
border-top:21px solid #e3e3e3;
border-right:6px solid #f9f9f9;
border-left:6px solid #e3e3e3;
border-bottom:3px solid #e3e3e3;
margin: 50px 12px;
overflow:hidden;
}
.botones{
position:absolute;
width:21px;
height:6px;
background:#d12333;
margin:12px 9px;
}
.botones::before{
content:"";
display:block;
width:21px;
height:6px;
background:#29abe1;
margin:0px 53px;
}
.bot3{
position:absolute;
width:12px;
height:17px;
background:gray;
margin:21px 13px
}
.bot3::before{
content:"";
display:block;
width:12px;
height:17px;
background:gray;
margin:0px 53px
}
.agua{
position:absolute;
width:7px;
height:53px;
background:#5db8ed;
margin:39px 69px;
-moz-animation: grow 3s linear infinite;
-ms-animation: grow 3s linear infinite;
-webkit-animation: grow 3s linear infinite;
-o-animation: grow 3s linear infinite;
animation:grow 3s linear infinite;
}
.agua3{
position:absolute;
width:25px;
height:30px;
background:#5db8ed;
margin:85px 60px;
-moz-animation: grow 3s linear infinite;
-ms-animation: grow 3s linear infinite;
-webkit-animation: grow3 3s linear infinite;
-o-animation: grow 3s linear infinite;
animation:grow3 3s linear infinite;
}
.botella{
position:absolute;
width: 25px;
height:35px;
background:#c9eaf8;
margin:55px 60px;
opacity:.7;
}
.botella::before{
content:"";
display:block;
border-bottom: 12px solid #c9eaf8;
border-left: 3px solid transparent;
border-right:3px solid transparent;
height: 0;
width: 19px;
margin:-7px 0px;
}
.botella::after{
content:"";
display:block;
width:16px;
height:7px;
background:#c9eaf8;
margin:-19px 5px
}
.reflejo3{
position:absolute;
width:5px;
height:30px;
background:white;
margin:7px 17px
}
.table{
position:absolute;
width: 192px;
height:21px;
background:white;
margin: 400px 400px
}
.table::before{
content:"";
display:block;
width: 12px;
height:112px;
background:white;
margin:0 9px;
}
.table::after{
content:"";
display:block;
width: 12px;
height:112px;
background:white;
margin:-112px 172px
}
.vaso{
position:absolute;
border-top: 30px solid rgba(255, 255, 255, .5);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
height: 0;
width: 21px;
margin:-142px 80px;}
.vaso::before{
content:"";
position:absolute;
width:3px;
height:21px;
background:rgba(255, 255, 255, .7);
margin:-25px 16px;
transform:rotate(12deg);
-moz-transform:rotate(12deg);
-webkit-transform:rotate(12deg);
}
@keyframes grow{
0% {
height:0;
}
50% {
height:53px;
}
100% {
height:53px;
}
}
@-moz-keyframes grow{
0% {
height:0;
}
50% {
height:53px;
}
100% {
height:53px;
}
}
@-webkit-keyframes grow{
0% {
height:0;
}
50% {
height:53px;
}
100% {
height:53px;
}
}
@keyframes grow3{
0% {
-webkit-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-o-transform: scale(1, 0);
-ms-transform: scale(1, 0);
transform: scale(1,0);
}
50% {
-webkit-transform: scale(1,3);
-moz-transform: scale(1, 3);
-o-transform: scale(1, 3);
-ms-transform: scale(1, 3);
transform: scale(1,3);
}
100% {
-webkit-transform: scale(1,3);
-moz-transform: scale(1, 3);
-o-transform: scale(1, 3);
-ms-transform: scale(1, 3);
transform: scale(1,3);
}
}
@-moz-keyframes grow3{
0% {
-webkit-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-o-transform: scale(1, 0);
-ms-transform: scale(1, 0);
transform: scale(1,0);
}
50% {
-webkit-transform: scale(1,3);
-moz-transform: scale(1, 3);
-o-transform: scale(1, 3);
-ms-transform: scale(1, 3);
transform: scale(1,3);
}
100% {
-webkit-transform: scale(1,3);
-moz-transform: scale(1, 3);
-o-transform: scale(1, 3);
-ms-transform: scale(1, 3);
transform: scale(1,3);
}
}
@keyframes grow3{
0% {
-webkit-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-o-transform: scale(1, 0);
-ms-transform: scale(1, 0);
transform: scale(1,0);
}
50% {
-webkit-transform: scale(1,3);
-moz-transform: scale(1, 3);
-o-transform: scale(1, 3);
-ms-transform: scale(1, 3);
transform: scale(1,3);
}
100% {
-webkit-transform: scale(1,3);
-moz-transform: scale(1, 3);
-o-transform: scale(1, 3);
-ms-transform: scale(1, 3);
transform: scale(1,3);
}
}
@-webkit-keyframes grow3{
0% {
-webkit-transform: scale(1, 0);
-moz-transform: scale(1, 0);
-o-transform: scale(1, 0);
-ms-transform: scale(1, 0);
transform: scale(1,0);
}
50% {
-webkit-transform: scale(1,3);
-moz-transform: scale(1, 3);
-o-transform: scale(1, 3);
-ms-transform: scale(1, 3);
transform: scale(1,3);
}
100% {
-webkit-transform: scale(1,3);
-moz-transform: scale(1, 3);
-o-transform: scale(1, 3);
-ms-transform: scale(1, 3);
transform: scale(1,3);
}
}
#burbujas {
position: absolute;
z-index: 3;
width: 0.1em;
height: 16em;
margin:-12px 70px;
}
#burbujas span {
display: block;
position: absolute;
bottom: -3.5em;
left: 50%;
margin-left: -2em;
height: 0;
width: 0;
border: 12px solid white;
border-radius: 3.5em;
left: -1.4em;
opacity: 0;
transform: scale(0.2);
}
@-webkit-keyframes burbujasL {
0% {
-moz-transform: scale(0.2) translate(0, 0);
-ms-transform: scale(0.2) translate(0, 0);
-webkit-transform: scale(0.2) translate(0, 0);
transform: scale(0.2) translate(0, 0);
}
10% {
opacity: 1;
-moz-transform: scale(0.2) translate(0, -5px);
-ms-transform: scale(0.2) translate(0, -5px);
-webkit-transform: scale(0.2) translate(0, -5px);
transform: scale(0.2) translate(0, -5px);
}
100% {
opacity: 0;
-moz-transform: scale(1) translate(-20px, -130px);
-ms-transform: scale(1) translate(-20px, -130px);
-webkit-transform: scale(1) translate(-20px, -130px);
transform: scale(1) translate(-20px, -130px);
}
}
@-moz-keyframes burbujasL {
0% {
-moz-transform: scale(0.2) translate(0, 0);
-ms-transform: scale(0.2) translate(0, 0);
-webkit-transform: scale(0.2) translate(0, 0);
transform: scale(0.2) translate(0, 0);
}
10% {
opacity: 1;
-moz-transform: scale(0.2) translate(0, -5px);
-ms-transform: scale(0.2) translate(0, -5px);
-webkit-transform: scale(0.2) translate(0, -5px);
transform: scale(0.2) translate(0, -5px);
}
100% {
opacity: 0;
-moz-transform: scale(1) translate(-20px, -130px);
-ms-transform: scale(1) translate(-20px, -130px);
-webkit-transform: scale(1) translate(-20px, -130px);
transform: scale(1) translate(-20px, -130px);
}
}
@-o-keyframes burbujasL {
0% {
-moz-transform: scale(0.2) translate(0, 0);
-ms-transform: scale(0.2) translate(0, 0);
-webkit-transform: scale(0.2) translate(0, 0);
transform: scale(0.2) translate(0, 0);
}
10% {
opacity: 1;
-moz-transform: scale(0.2) translate(0, -5px);
-ms-transform: scale(0.2) translate(0, -5px);
-webkit-transform: scale(0.2) translate(0, -5px);
transform: scale(0.2) translate(0, -5px);
}
100% {
opacity: 0;
-moz-transform: scale(1) translate(-20px, -130px);
-ms-transform: scale(1) translate(-20px, -130px);
-webkit-transform: scale(1) translate(-20px, -130px);
transform: scale(1) translate(-20px, -130px);
}
}
@keyframes burbujasL {
0% {
-moz-transform: scale(0.2) translate(0, 0);
-ms-transform: scale(0.2) translate(0, 0);
-webkit-transform: scale(0.2) translate(0, 0);
transform: scale(0.2) translate(0, 0);
}
10% {
opacity: 1;
-moz-transform: scale(0.2) translate(0, -5px);
-ms-transform: scale(0.2) translate(0, -5px);
-webkit-transform: scale(0.2) translate(0, -5px);
transform: scale(0.2) translate(0, -5px);
}
100% {
opacity: 0;
-moz-transform: scale(1) translate(-20px, -130px);
-ms-transform: scale(1) translate(-20px, -130px);
-webkit-transform: scale(1) translate(-20px, -130px);
transform: scale(1) translate(-20px, -130px);
}
}
@-webkit-keyframes burbujasR {
0% {
-moz-transform: scale(0.2) translate(0, 0);
-ms-transform: scale(0.2) translate(0, 0);
-webkit-transform: scale(0.2) translate(0, 0);
transform: scale(0.2) translate(0, 0);
}
10% {
opacity: 1;
-moz-transform: scale(0.2) translate(0, -5px);
-ms-transform: scale(0.2) translate(0, -5px);
-webkit-transform: scale(0.2) translate(0, -5px);
transform: scale(0.2) translate(0, -5px);
}
100% {
opacity: 0;
-moz-transform: scale(1) translate(20px, -130px);
-ms-transform: scale(1) translate(20px, -130px);
-webkit-transform: scale(1) translate(20px, -130px);
transform: scale(1) translate(20px, -130px);
}
}
@-moz-keyframes burbujasR {
0% {
-moz-transform: scale(0.2) translate(0, 0);
-ms-transform: scale(0.2) translate(0, 0);
-webkit-transform: scale(0.2) translate(0, 0);
transform: scale(0.2) translate(0, 0);
}
10% {
opacity: 1;
-moz-transform: scale(0.2) translate(0, -5px);
-ms-transform: scale(0.2) translate(0, -5px);
-webkit-transform: scale(0.2) translate(0, -5px);
transform: scale(0.2) translate(0, -5px);
}
100% {
opacity: 0;
-moz-transform: scale(1) translate(20px, -130px);
-ms-transform: scale(1) translate(20px, -130px);
-webkit-transform: scale(1) translate(20px, -130px);
transform: scale(1) translate(20px, -130px);
}
}
@-o-keyframes burbujasR {
0% {
-moz-transform: scale(0.2) translate(0, 0);
-ms-transform: scale(0.2) translate(0, 0);
-webkit-transform: scale(0.2) translate(0, 0);
transform: scale(0.2) translate(0, 0);
}
10% {
opacity: 1;
-moz-transform: scale(0.2) translate(0, -5px);
-ms-transform: scale(0.2) translate(0, -5px);
-webkit-transform: scale(0.2) translate(0, -5px);
transform: scale(0.2) translate(0, -5px);
}
100% {
opacity: 0;
-moz-transform: scale(1) translate(20px, -130px);
-ms-transform: scale(1) translate(20px, -130px);
-webkit-transform: scale(1) translate(20px, -130px);
transform: scale(1) translate(20px, -130px);
}
}
@keyframes burbujasR {
0% {
-moz-transform: scale(0.2) translate(0, 0);
-ms-transform: scale(0.2) translate(0, 0);
-webkit-transform: scale(0.2) translate(0, 0);
transform: scale(0.2) translate(0, 0);
}
10% {
opacity: 1;
-moz-transform: scale(0.2) translate(0, -5px);
-ms-transform: scale(0.2) translate(0, -5px);
-webkit-transform: scale(0.2) translate(0, -5px);
transform: scale(0.2) translate(0, -5px);
}
100% {
opacity: 0;
-moz-transform: scale(1) translate(20px, -130px);
-ms-transform: scale(1) translate(20px, -130px);
-webkit-transform: scale(1) translate(20px, -130px);
transform: scale(1) translate(20px, -130px);
}
}
#burbujas .b0 {
-webkit-animation: burbujasL 10s 0s infinite;
-moz-animation: burbujasL 10s 0s infinite;
-o-animation: burbujasL 10s 0s infinite;
animation: burbujasL 10s 0s infinite;
}
#burbujas .b1 {
-webkit-animation: burbujasR 10s 1s infinite;
-moz-animation: burbujasR 10s 1s infinite;
-o-animation: burbujasR 10s 1s infinite;
animation: burbujasR 10s 1s infinite;
}
#burbujas .b2 {
-webkit-animation: burbujasL 10s 2s infinite;
-moz-animation: burbujasL 10s 2s infinite;
-o-animation: burbujasL 10s 2s infinite;
animation: burbujasL 10s 2s infinite;
}
#burbujas .b3 {
-webkit-animation: burbujasR 10s 3s infinite;
-moz-animation: burbujasR 10s 3s infinite;
-o-animation: burbujasR 10s 3s infinite;
animation: burbujasR 10s 3s infinite;
}
#burbujas .b4 {
-webkit-animation: burbujasL 10s 4s infinite;
-moz-animation: burbujasL 10s 4s infinite;
-o-animation: burbujasL 10s 4s infinite;
animation: burbujasL 10s 4s infinite;
}
#burbujas .b5 {
-webkit-animation: burbujasR 10s 5s infinite;
-moz-animation: burbujasR 10s 5s infinite;
-o-animation: burbujasR 10s 5s infinite;
animation: burbujasR 10s 5s infinite;
}
#burbujas .b6 {
-webkit-animation: burbujasL 10s 6s infinite;
-moz-animation: burbujasL 10s 6s infinite;
-o-animation: burbujasL 10s 6s infinite;
animation: burbujasL 10s 6s infinite;
}
#burbujas .b7 {
-webkit-animation: burbujasR 10s 7s infinite;
-moz-animation: burbujasR 10s 7s infinite;
-o-animation: burbujasR 10s 7s infinite;
animation: burbujasR 10s 7s infinite;
}
#burbujas .b8 {
-webkit-animation: burbujasR 10s 8s infinite;
-moz-animation: burbujasR 10s 8s infinite;
-o-animation: burbujasR 10s 8s infinite;
animation: burbujasR 10s 8s infinite;
}
#burbujas .b8 {
-webkit-animation: burbujasR 10s 9s infinite;
-moz-animation: burbujasR 10s 9s infinite;
-o-animation: burbujasR 10s 9s infinite;
animation: burbujasR 10s 9s infinite;
}
@keyframes va {
0%{margin:-191px -30px;}
50%{margin:-191px -33px;}
75%{margin:-191px -30px;}
100%{margin:-191px -27px;}
}
@-moz-keyframes va {
0%{margin:-191px -30px;}
50%{margin:-191px -33px;}
75%{margin:-191px -30px;}
100%{margin:-191px -27px;}
}
@-webkit-keyframes va {
0%{margin:-191px -30px;}
50%{margin:-191px -33px;}
75%{margin:-191px -30px;}
100%{margin:-191px -27px;}
}
