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变量具有百分比。

在图像中动画CSS

1 个答案: