html - 在图像中设置 CSS 动画

Question

所以我正在从事一个 AI 元素，该元素使用计算机视觉来检测真正的咖啡壶及其填充程度。我正在尝试用我非常有限的网络开发经验制作一个网页来补充这一点。我希望它通过根据咖啡壶图像的满满程度填充或排出咖啡壶图像，以“漂亮”的方式显示计算机视觉所看到的内容。问题是，我还想保持所有内容在页面上正确缩放和居中，而不管正在查看的屏幕大小(想想移动设备)。我有居中和缩小的功能，但我不知道如何保留这两个功能并让它为填充/排水设置动画。我如何模拟液位但保持比例？

这是我目前所拥有的:

body {
  height: 100%;
  width: 100%;
  background: #E0D9A8;
}
html {
  min-height: 100%;
  position: relative;
}
#main {
  position: relative;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
#main .image1 {
  width: 31vw;
  min-width: 250px;
  min-height: auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 50%);
}
#main img {
  width: 100%;
  height: 100%;
}
.circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block;
  min-width: 250px;
  white-space: nowrap;
}
.circle:before {
  border-radius: 50%;
  width: 100%;
  padding-bottom: 100%;
  background: white;
  content: '';
  display: inline-block;
  vertical-align: middle;
  padding-bottom: 0vw;
  width: 25vw;
  height: 25vw;
  min-width: 200px;
  min-height: 200px;
}

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

这是其中的一个 jsfiddle:https://jsfiddle.net/fuk291kf/3/

Answer 1

搜索一张图片(或用 CSS 设计)一个杯子，里面有一个简单的表格，可以很容易地装满它；然后使用 Javascript 创建动画。

这是一个例子。 https://jsfiddle.net/nanilab/52jsfjjc/

fill 变量有百分比。