Анимации и переходы

Введение

В оживленном мире "Дом питомца" - виртуального святилища для любителей животных - Тейлор, креативный веб-дизайнер, отправляется в путешествие, чтобы придать жизнь веб-сайту.

Этот лабарий использует CSS-анимации и переходы для улучшения пользовательского опыта, делая сайт информативным, привлекательным и динамичным. Тейлор стремится превратить статические элементы в интерактивные функции, которые пленят посетителей, проведя их по незабываемому путешествию в цифровой сфере по уходу за питомцами.

Skills Graph

Псевдоэлемент

В панели навигации на странице "Питомцы", при наведении курсора на пункт навигации, подчёркивание появляется для этого пункта навигации.

Нужно ли нам задумываться, как достигается этот эффект, его показ и скрытие?

Псевдоэлемент ::after в CSS - это мощный инструмент, который позволяет разработчикам вставлять дополнительный контент или декорации после содержимого выбранного элемента. Этот метод можно использовать для различных задач по дизайну и макету, таких как добавление декоративных элементов, создание четких разделов макета или вставка контента без изменения структуры HTML. Вот учебник по использованию псевдоэлемента ::after в CSS.

::after - это псевдоэлемент, который позволяет вставлять дополнительный контент в конец содержимого элемента. Этот контент по умолчанию является встроенным элементом.

селектор::after {
  /* CSS свойства */
}

Используйте свойство content для указания контента, который нужно вставить. Это может быть текст, изображения или другие CSS свойства.

Например, добавьте красное сердце после элемента <p>:

Мы можем реализовать эффект подчёркивания с использованием ::after, добавив следующее в css:

.navigation li::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: black;
}

В настоящее время на странице ничего не изменилось, потому что ширина равна 0. Далее мы будем использовать :hover, чтобы достичь эффекта подчёркивания, изменив ширину на 100% при наведении курсора на элемент.

Псевдокласс

Псевдо-класс селектор :hover в CSS используется для выбора элементов, над которыми находится указатель мыши. Это позволяет разработчикам предоставлять визуальную обратную связь для взаимодействий пользователя, таких как изменение цветов, размеров или добавление анимаций, тем самым улучшая пользовательский опыт.

селектор:hover {
  /* CSS свойства */
}

Например, чтобы изменить цвет элемента <button>, когда указатель мыши находится над ним, можно использовать следующий CSS:

Теперь,既然我们知道如何使用:hover，我们可以在style.css中添加以下内容：

.navigation li:hover::after {
  width: 100%;
}

На данный момент на навигационных элементах при наведении курсора мыши достигается эффект подчёркивания, однако внимательные студенты могут заметить, что при появлении эффекта возникает эффект скольжения вниз линии, а более гладкая линия, которая представляет собой то, что мы хотели показать вам с помощью другого CSS-атрибута. （这里最后一句翻译得有点奇怪，原文表述不太清晰准确，翻译尽量贴近原文但可能意思不太明确，大致是说出现了向下滑动的效果，而更平滑的线是通过另一个CSS属性来实现的意思）

Трансформация

CSS-трансформации позволяют добавить эффект при переходе от одного стиля к другому, не используя Flash-анимации или JavaScript. Вы можете указать длительность перехода, а также способ, которым происходит переход, с использованием функций тайминга.

Свойство CSS transition - это сокращение для четырех свойств, связанных с переходом:

• transition-property: Указывает название CSS-свойства, для которого предназначен эффект перехода.
• transition-duration: Определяет длительность перехода.
• transition-timing-function: Описывает, как будет происходить переход в течение его длительности.
• transition-delay: Указывает задержку перед началом перехода.

Например, следующий CSS-код определяет эффект перехода, который изменяет цвет фона элемента от цвета аква до rgb(145, 255, 0) за 1 секунду:

Теперь,既然我们知道如何使用transition，我们可以在style.css中添加以下内容：

.navigation li::after {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  background-color: black;
  transition: width 0.3s ease;
}

Прозрачность

Когда вы перемещаете указатель мыши над изображением в области отображения, изображение будет становиться более прозрачным, и под ним появится текст.

Свойство CSS opacity используется для установки уровня прозрачности элемента. С помощью этого свойства вы можете контролировать прозрачность элемента и его дочерних элементов, делая элемент полностью прозрачным, полностью непрозрачным или любым уровнем прозрачности между ними. Значения прозрачности могут варьироваться от 0 (полностью прозрачный) до 1 (полностью непрозрачный). Это свойство очень полезно для создания эффектов затухания, выделения интерактивных элементов или дизайна интерфейсов с чувством глубины.

селектор {
  opacity: значение; /* Значения могут варьироваться от 0 (полностью прозрачный) до 1 (полностью непрозрачный) */
}

Теперь,既然我们知道如何使用opacity，我们可以在style.css中添加以下内容：

.service figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  opacity: 0;
}
.service figure:hover img {
  opacity: 0.5;
}
.service figure:hover figcaption {
  opacity: 1;
}

Достигнут эффект увеличения прозрачности. Далее мы добавим некоторую гладкость к взаимодействию.

Трансформация

Свойство CSS Transform позволяет вращать, масштабировать, искривлять или перемещать элемент, тем самым изменяя форму и позицию элемента без влияния на макет страницы. Это мощный инструмент для создания динамических визуальных эффектов и сложных анимаций.

Свойство Transform включает в себя следующие функции:

• rotate(): Вращает элемент, параметром является угол вращения (например, rotate(45deg) для вращения на 45 градусов).
• scale(): Масштабирует элемент, параметром является коэффициент масштабирования (например, scale(2) для удвоения размера).
• translate(): Перемещает элемент, параметрами являются расстояния для перемещения по осям X и Y (например, translate(50px, 100px) для перемещения на 50px вправо и 100px вниз).
• skew(): Искривляет элемент, параметрами являются углы искривления по осям X и Y (например, skew(30deg, 20deg) для искривления на 30 градусов по оси X и на 20 градусов по оси Y).

Например, переместите элемент <p> на 100 пикселей вправо по оси x.

Теперь,既然我们知道如何使用transform，我们可以在style.css中添加以下内容：

.service figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  color: #fff;
  padding: 10px;
  opacity: 0;
  transform: translateY(100%);
  transition:
    transform 0.5s ease,
    opacity 0.5s ease;
}
.service figure:hover figcaption {
  opacity: 1;
  transform: translateY(0%);
}

Z-Index

Свойство CSS z-index контролирует вертикальный порядок наложения элементов на странице. Когда элементы накладываются друг на друга, z-index определяет, какой элемент должен быть отображён сверху. Это свойство можно применить только к позиционированным элементам, то есть элементам, у которых значение атрибута position равно relative, absolute, fixed или sticky. Значение z-index может быть положительным, отрицательным или равным 0, при этом большие значения означают, что элемент будет помещён поверх элементов с меньшими значениями.

селектор {
  position: relative | absolute | fixed | sticky;
  z-index: число;
}

Например, предположим, что есть два наложенных элемента. Мы можем использовать z-index, чтобы контролировать, какой элемент будет отображён сверху:

Теперь,既然我们知道如何使用z-index，我们可以在style.css中添加以下内容：

header {
  position: fixed;
  display: flex;
  flex-direction: row;
  background-color: rgb(233, 174, 87);
  width: 100%;
  max-height: max-content;
  min-height: 1em;
  padding-top: 1%;
  padding-bottom: 1%;
  text-transform: uppercase;
  z-index: 1;
}

Реализация анимаций с ключевыми кадрами

При входе на сайт на странице приветствия есть анимация появления элемента.

CSS-анимации - это мощный инструмент, который позволяет разработчикам создавать анимированные эффекты для элементов веб-страницы без использования JavaScript. С помощью CSS-анимаций можно определить последовательность анимаций, которая переводит элемент из одного состояния стиля в другое.

CSS-анимации основываются в основном на двух ключевых частях: правиле @keyframes и свойствах анимации.

• Правило @keyframes: Определяет ключевые кадры в последовательности анимации. Каждый ключевой кадр описывает стиль анимации в определенный момент времени.
• Свойства animation: Применяют определенное правило @keyframes к селектору и назначают длительность, задержку, количество итераций и другие параметры для анимации.

Например:

Теперь,既然我们知道如何使用动画，我们可以在style.css中添加以下内容：

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
  margin: auto;
  padding: 0 20px;
  animation: fade-in;
  animation-duration: 8s;
}
.box-feature.cover-image {
  animation: fade-in;
  animation-duration: 5s;
}

Резюме

В этом практическом занятии Тейлор успешно применил CSS-анимации и переходы на сайт "Дом для питомцев", создав живой и интерактивный пользовательский опыт. Путешествие от статичных страниц до динамических взаимодействий демонстрирует силу неожиданных визуальных сигналов в улучшении навигации по сайту и вовлечённости пользователя. С помощью анимаций и переходов Тейлор сделал цифровое пространство "Дома для питомцев" более привлекательным и запоминающимся для каждого посетителя.