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

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

Шаг 1. HTML

Так как у нас стороны треугольника будут состоять из множества квадратов, нам необходимо их отобразить, для этого мы дублируем слоя:

Таким образом мы добавили одну сторону треугольника, нам необходимо добавить еще три таких, кроме этого мы заключаем все три стороны в класс <div class='tri'>.

Объемная анимация для сайта при помощи CSS3

Шаг 2. CSS

Теперь нам необходимо все это стилизовать, на самом деле мы установим параметры для одного слайда-квадрата, а затем мы его просто дублируем в разметке, при этом указываем траекторию вращения, и вариант для задержки и пуска анимации:

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

Вот и все. Готово!

Читайте также: