html - 用 css 填充图像

Question

我正在尝试创建一个可以用 css/js 填充和排出的咖啡壶。我的想法是创建一个咖啡壶图像，并在中间填充我可以根据我希望咖啡壶被注满多少来制作动画的 css。我不确定如何让 css-fill 留在锅内。我怎样才能填充 jar 的内部，同时确保“填充物”在不同屏幕尺寸上停留在 jar 图像内？

这是我目前拥有的 html/css:

  <div id="main">
    <div class="image1 five columns offset-by-two">
      <div class="circle"></div>
      <img src="http://i.imgur.com/DbBqGTp.png">
    </div>
  </div>

#main{
    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    overflow:hidden;
}

#main img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.circle
{
    position: absolute;
    top: 57%;
    left: 47%;
    transform: translate(-50%, -50%);
    width: 470px;
    height: 470px;
    border-radius:250px;
    font-size:50px;
    color:#fff;
    line-height:500px;
    text-align:center;
    background:#000
}

jsfiddle:https://jsfiddle.net/vjpprtfu/

Answer 1

好主意!用里面的咖啡液制作一个面具 div。 fiddle :https://jsfiddle.net/fuk291kf/

标记循环如下:

  <div id="main">
      <div class="circle-mask">
         <div class="liquid"></div>
      </div>
      <img src="http://i.imgur.com/DbBqGTp.png">
  </div>

和CSS:

.circle-mask {
    position: absolute;
    width: 77%;
    height: 77%;
    top:45px;
    border-radius:50%;
    text-align:center;
    border: 1px solid red;
    overflow: hidden;
    display:block;
}

.liquid {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    height: 100%;
    font-size:50px;
    color:#fff;
    text-align:center;
    background:#000;
}

要改变液体的液位，升高或降低.liquid的最高值

现在您必须添加另一个绝对定位到圆圈的 div，该圆圈夹住从壶底流出的咖啡。