Water for everybody!!! (Only CSS)

HTML
<div class="contenedor"> <div class="table"><div class="vaso"></div></div> <div class="bidon3"></div> <div class="bidon"> <div class="reflejo"></div> <ul class="crestas"> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> <ul> <div id="burbujas"> <span class="b0"></span> <span class="b1"></span> <span class="b2"></span> <span class="b3"></span> <span class="b4"></span> <span class="b5"></span> <span class="b6"></span> <span class="b7"></span> <span class="b8"></span> <span class="b9"></span> </div> </ul> </div> <div class="dis"> <div class="cuadrado"> <div class="botones"></div> <div class="bot3"></div> <div class="agua"></div> <div class="agua3"></div> <div class="botella"> <div class="reflejo3"></div> </div> </div> </div> </div> CS
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;} }
JAVASCRIPT
Expand for more options Login