Анимация CSS внутри изображения ⇐ Html

[Anonymous]

Итак, я работаю над проектом искусственного интеллекта, который использует компьютерное зрение, чтобы определить настоящий кофейник и узнать, насколько он наполнен. Я пытаюсь создать веб-страницу, используя свой очень ограниченный опыт веб-разработки, чтобы дополнить это. Я хочу, чтобы он «красиво» отображал то, что видит компьютерное зрение, заполняя или сливая изображение кофейника в зависимости от того, насколько он полон. Дело в том, что я также хотел бы, чтобы все было правильно масштабировано и центрировано на странице, независимо от размера экрана, на котором она просматривается (например, на мобильных устройствах). У меня есть центрирование и уменьшение масштаба, но я не могу понять, как сохранить эти две функции и анимировать наполнение/слив. Как мне имитировать уровень жидкости, сохраняя масштаб?

Вот что у меня есть на данный момент:

Код: Выделить всё

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;
}

Код: Выделить всё

[img]http://i.imgur.com/DbBqGTp.png[/img]

И вот jsfiddle этого: https://jsfiddle.net/fuk291kf/3/

Подробнее здесь: https://stackoverflow.com/questions/370 ... e-an-image