Здравствуйте. У меня есть задача: у меня есть 1-литровая бутылка, из которой периодически убавляется вода. Как можно графически отобразить уровень воды в бутылке? То есть, мне нужно визуально показать, какая часть бутылки заполнена, и рядом указать, сколько миллилитров осталось в ней. Может, существуют какие-то плагины, графики или столбики, которые я мог бы адаптировать под свои нужды? Буду признателен за ваши идеи. <a href="https://codepen.io/irodger/pen/vGbvKm" rel="nofollow">Я нашел что-то подобное</a>, но, возможно, у вас есть другие предложения.
Здравствуйте!
Отличное решение для отображения уровня жидкости в бутылке можно реализовать с помощью HTML, CSS и JavaScript. Я предлагаю создать простую анимацию, которая будет выводить уровень воды в бутылке вместе с текстовой информацией о количестве оставшейся жидкости.
### Вот пример реализации:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Уровень воды в бутылке</title>
<style>
.bottle {
width: 100px;
height: 300px;
background: #cfe2f3;
border: 5px solid #000;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.water {
width: 100%;
background: #007bff;
position: absolute;
bottom: 0;
transition: height 0.5s;
}
.level {
margin-top: 20px;
font-size: 24px;
text-align: center;
}
</style>
</head>
<body>
<div class="bottle">
<div class="water" id="water" style="height: 100%;"></div>
</div>
<div class="level" id="level">Осталось: 1000 мл</div>
<input type="range" id="water-level" min="0" max="1000" value="1000" step="10">
<script>
const waterElement = document.getElementById('water');
const levelElement = document.getElementById('level');
const waterLevelInput = document.getElementById('water-level');
waterLevelInput.addEventListener('input', (event) => {
const remainingWater = event.target.value;
const height = (remainingWater / 1000) * 100; // высота в процентах
waterElement.style.height = height + '%';
levelElement.textContent = `Осталось: ${remainingWater} мл`;
});
</script>
</body>
</html>
```
### Пояснение к коду:
1. **HTML-структура**:
- Создаем `div` для бутылки с классом `bottle`.
- Внутри бутылки создаем `div` для воды с классом `water`, который будет изменять свою высоту в зависимости от оставшегося объема.
- Добавляем `div` для отображения оставшегося объема и слайдер для изменения уровня воды.
2. **CSS-стили**:
- Применяем стили для бутылки и воды, устанавливая размеры и цвета.
- Устанавливаем `overflow: hidden`, чтобы любые элементы, выходящие за пределы бутылки, скрывались.
3. **JavaScript**:
- Получаем элементы для воды и уровня.
- Добавляем обработчик событий для изменения значения слайдера, который динамически обновляет высоту воды и текстовое значение оставшегося объема в миллилитрах.
### Итог:
С помощью этого простого примера вы можете визуально отобразить уровень воды в бутылке и легко управлять этим уровнем с помощью слайдера. Вы можете дополнительно настроить стили и функциональность в соответствии с вашими предпочтениями.
Рисуем бутылку в фотошопе или иллюстраторе.
В иллюстраторе делаем внутренний контур.
Поверх бутылки накладываем див, у которого фон закрашивается по вертикали на необходимый уровень
Делаем из контура свгэшку и накладываем svg-маску на див-заполнитель.