jquery - 使用 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>