Создание красивого сайта с 3D анимацией волны

В этом уроке мы рассмотрим создание сайта с красивой 3D анимацией волны при наведении мыши на чистом HTML и CSS. Главный замысел урока - показать возможности стилизации соседних элементов в CSS. Немногие знают, что стилизовать можно не только последующие элементы, посредством использования +, но и предыдущие элементы от выбранного. И сегодня я постараюсь максимально раскрыть эту тему на таком потрясающем примере.

Смотреть урок на YouTube

Материалы урока и готовый результат: Скачать

Стартовая HTML разметка

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	
</body>
</html>

Cubic-Bezier - Плавная анимация:

Ниже представлен скриншот из сервиса Cubic-Bezier с изображением позиционирования точек Animation/Time. Изменяя положение ползунков на сайте сервиса, вы можете настроить анимации по своему вкусу.

--transition: 1.5s cubic-bezier(0.1, .7, 0, 1);

Премиум уроки от WebDesign Master

Курс по созданию сайта от А до Я на Jekyll

Создание сайта от А до Я. Комплексный курс

Курс по созданию интернет-магазина на OpenCart

Создание современного интернет-магазина от А до Я

Я - фрилансер! Базовый курс для начинающих

Создание красивого сайта с 3D анимацией волны | Материалы урока

Рекомендуемые уроки и инструменты

Стартовая HTML разметка

Cubic-Bezier - Плавная анимация:

Премиум уроки от WebDesign Master

Другие уроки по теме «Верстка»