Question

我正在尝试创建一个可以用css / js填充和排出的咖啡壶。我的想法是创建一个咖啡壶图像，并在中间填充css，我可以根据我希望咖啡壶的填充量来制作动画。我不确定如何让css-fill保持在锅内。我如何填充锅内，但也要确保＆＃34;填充＆＃34;在不同的屏幕尺寸上保留在锅图像内？

这是我到目前为止的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。小提琴：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，这个div位于圆圈的绝对位置，用于剪切从底部出来的咖啡。

使用css

1 个答案: