動畫正確使用CSS的dVision

Question

我發現一支筆，我叉了我的進一步使用，

https://codepen.io/anon/pen/RVoJpb

正如你可以看到燒杯被誤填，我想它就像在真實填寫生活。我試着改變寬度和位置。

我相信的變化在liquid部需要

#liquid { 
    background-color: #735546; 
    border: 0px solid #735546; 
    border-radius: 0 0 150px 150px; 
    bottom: 0; 
    height: 0px; 
    overflow: hidden; 
    width: 200px; 
} 

#liquid:after { 
    background-color: rgba(255, 255, 255, 0.25); 
    bottom: -10px; 
    content: ''; 
    height: 200px; 
    left: -40px; 
    position: absolute; 
    transform: rotate(30deg); 
    -webkit-transform: rotate(15deg); 
    width: 110px; 
} 

Answer 1

在這種僅氣泡檢查此

#container { 
    height: 370px; 
    margin: 0 auto; 
    overflow: hidden; 
    position: relative; 
    top: -20px; 
    width: 248px; 
} 

#container div { position: absolute; } 

#liquid { 
    background-color: #735546; 
    border: 0px solid #735546; 
    bottom: 0; 
    height: 0px; 
    overflow: hidden; 
    width: 500px; 
} 

#liquid:after { 
    background-color: rgba(255, 255, 255, 0.25); 
    bottom: -10px; 
    content: ''; 
    height: 200px; 
    left: -40px; 
    position: absolute; 
    transform: rotate(0deg); 
    -webkit-transform: rotate(0deg); 
     width: 150px; 
} 

#liquid .bubble { 
    -webkit-animation-name: bubble; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-timing-function: linear; 
    background-color: rgba(255, 255, 255, 0.2); 
    bottom: 0; 
    border-radius: 10px; 
    height: 20px; 
    width: 20px; 
} 

@-webkit-keyframes bubble { 
    0% { bottom: 0; } 

    50% { 
    background-color: rgba(255, 255, 255, 0.2); 
     bottom: 80px; 
    } 

    100% { 
    background-color: rgba(255, 255, 255, 0); 
     bottom: 160px; 
    } 
} 

.bubble1 { 
    left: 10px; 
    -webkit-animation-delay: 1000ms; 
    -webkit-animation-duration: 1000ms; 
} 

.bubble2 { 
    left: 50px; 
    -webkit-animation-delay: 700ms; 
    -webkit-animation-duration: 1100ms; 
} 

.bubble3 { 
    left: 100px; 
    -webkit-animation-delay: 1200ms; 
    -webkit-animation-duration: 1300ms; 
} 

.bubble4 { 
    left: 130px; 
    -webkit-animation-delay: 1100ms; 
    -webkit-animation-duration: 700ms; 
} 

.bubble5 { 
    left: 170px; 
    -webkit-animation-delay: 1300ms; 
    -webkit-animation-duration: 800ms; 
} 

JS

$(document).ready(function() { 
    $('#liquid') // I Said Fill 'Er Up! 
    .delay(10) 
    .animate({ 
     height: '170px' 
    },10); 

    }); 

HTML

<div id="container"> 
    <div id="liquid"> 
     <div class="bubble bubble1"></div> 
     <div class="bubble bubble2"></div> 
     <div class="bubble bubble3"></div> 
     <div class="bubble bubble4"></div> 
     <div class="bubble bubble5"></div> 
    </div> 
</div>