Создание CSS-анимации карточек. Краткое руководство. Часть 2

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

В этой части нашей статьи мы продолжим знакомить вас с основными типами CSS-анимации карточек, а также расскажем, как самостоятельно создать одну из них.

Типы CSS-анимации карточек

Ниже мы продолжим рассматривать основные типы CSS-анимации карточек.

CSS-анимация смены карточек

Для создания этой анимации вам нужно использовать HTML, CSS и несколько строк кода Javascript. При нажатии пользователем на  кнопку «Change» карточки меняются друг за другом. Такой тип анимации карточек подойдет для размещения рецептов или визитных карточек.

Создатель: Шубхам Чаудхари на CodePen.

CSS-анимация разворота

Автор Эндрю Кэнэм создал анимированные разворотные карточки, с помощью HTML, CSS и Javascript. Когда пользователь щелкает на одну из карточек — отображается разброс всех карт. Такой тип анимации идеально подходит для карточных или других игр.

Создатель: Эндрю Кэнэм на CodePen.

Как создать анимацию CSS-карточки

Ниже мы расскажем вам о том, как создать свою собственную карточку, которая переворачивается при нажатии.

1. Используйте HTML, чтобы обозначить, что будет расположено на карточке.

Чтобы создать анимацию карточки, вам нужно начать с создания HTML-кода вашей веб-страницы. Если ваша карточка состоит только из текста — используйте стандартные HTML-теги для абзацев (<p>) и заголовков (h1, h2).

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

Мы также добавили основной текст, чтобы указать действие, которое может предпринять пользователь. В данном случае мы используем <p>Click to flip</p>.

2. Создайте CSS.

Далее необходимо создать CSS. При работе с ним вам нужно будет подробно описать желаемый дизайн лицевой и оборотной стороны карточки. Также необходимо указать, каким образом карточка будет двигаться или меняться при нажатии.

Давайте рассмотрим код ниже:

Классы «.flip-card», «.front» и «.back» относятся к различным разделам кода, который написан на HTML. Здесь вы можете добавить различные эффекты. Например, в этом разделе кода карта переворачивается при нажатии:

Помните, что вы можете настроить все значения по своему усмотрению. Вы также можете редактировать этот код с помощью CodePen.

В результате мы получим вот такую карточку:

^{Источник: hubspot.com}