Мы рассмотрим, как создать привлекательную интерактивную анимацию изображения с помощью HTML и CSS. Объединяя мощь этих двух технологий, мы можем создавать визуально привлекательные веб-элементы, которые реагируют на взаимодействие пользователя. Мы пройдемся шаг за шагом по предоставленному коду и объясним каждый компонент, включая структуру HTML и стили CSS, используемые для достижения эффекта анимации.
Структура папок проекта:
Для начала давайте настроим структуру папок нашего проекта. Создайте новый каталог и назовите его соответствующим образом. Внутри этой папки у нас будут наши HTML-файлы, CSS-файлы и любые дополнительные файлы изображений, необходимые для анимации. Вот пример того, как может выглядеть структура папок:
- HTML
- CSS
- ингредиенты-1.png
- чаша-1.png
- ингредиенты-2.png
- чаша-2.png
Теперь давайте проанализируем HTML-структуру нашей интерактивной анимации изображения. Предоставленный HTML-код создает простой макет контейнера, используя комбинацию элементов div и тегов изображений.
Вот разбивка структуры HTML:
- Самый внешний div с классом “box” действует как основной контейнер для нашей анимации.
- Внутри этого контейнера у нас есть два идентичных div с классом “container”. Каждый div представляет один экземпляр нашей интерактивной анимации изображения.
- Внутри каждого “контейнерного” div у нас есть вложенный div с классом “wrapper” и тег изображения с классом “img-1”.
- Div “оболочка” используется для размещения элемента “img-1” абсолютно внутри div “контейнера”.
- Класс “img-2” применяется к другому тегу изображения, который является родственным тегу “wrapper” div. Это изображение представляет собой фон или базовое изображение для анимации.
Теперь рассмотрим стили CSS, применяемые к нашей структуре HTML. Эти стили определяют визуальный вид и анимационные эффекты нашей интерактивной анимации изображения.
Вот обзор используемых свойств CSS:
- Универсальный селектор (*) устанавливает отступы и поля равными 0 для всех элементов и применяет модель определения размеров полей “border-box” для обеспечения согласованных вычислений размеров.
- Класс “box” определяет макет основного контейнера, используя свойства viewport width (90vw) и flexbox для центрирования содержимого как по горизонтали, так и по вертикали.
- Класс “container” задает размеры каждого экземпляра анимации (500 на 500 пикселей) и позиционирует их относительно основного контейнера.
- Класс “img-1” определяет начальный стиль анимированного изображения, включая его положение (абсолютное), длительность перехода (1 сек.) и начальные значения масштаба и поворота.
- Селектор “.container:hover .img-1” применяет преобразование к элементу “img-1” при наведении курсора на его родительский контейнер, что приводит к эффекту масштабирования и трансформации поворота.
HTML КОД:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="box">
<div class="container">
<div class="wrapper"><img class="img-1" src="ingredients-1.png"/ ></div>
<img class="img-2" src="bowl-1.png"/ >
</div>
<div class="container">
<div class="wrapper"><img class="img-1" src="ingredients-2.png"/ ></div>
<img class="img-2" src="bowl-2.png"/ >
</div>
</div>
</body>
</html>CSS КОД:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.box {
width: 90vw;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
display: flex;
align-items: center;
justify-content: space-around;
}
.container {
position: relative;
height: 500px;
width: 500px;
}
.container img {
position: absolute;
}
.img-2 {
width: 100%;
cursor: pointer;
}
.img-1 {
width: 100%;
position: absolute;
transition: 1s;
transform-origin: center;
transform: scale(0) rotate(100deg);
}
.container:hover .img-1 {
transform: scale(1);
}В этом сообщении в блоге мы рассмотрели, как создать интерактивную анимацию изображения с использованием HTML и CSS. Объединив мощь этих двух технологий, мы смогли создать визуально привлекательную анимацию, которая реагирует на взаимодействия пользователя. Мы рассмотрели структуру HTML, стили CSS и структуру папок, необходимые для этого проекта.
