14 осенних CSS‑анимаций для вашего сайта

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

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

Падающие листья на CSS

Медленно падающие листья — простой, но эффективный способ добавить нотку осени на ваш сайт.

See the Pen CSS falling leaves by Aaron Griffin (@uurrnn) on CodePen.

Осень на CSS

Яркие листья, менюящие цвет при падении добавят немного осеннего настроения на ваш сайт.

See the Pen Only CSS: 和嵐 -Autumn- by Yusuke Nakaya (@YusukeNakaya) on CodePen.

Осень

CSS-анимация «Осень» показывает апельсиновое дерево, с которого опадают и собираются в кучу листья.

See the Pen Autumn by Nelson Rodrigues (@nelsonr) on CodePen.

Привет, осень

Чашка горячего кофе, стопка книг и падающие листья создадут идеальный осенний тон.

See the Pen Hello Fall by SalwaMugh (@salwamugh) on CodePen.

Падение листьев при прокрутке

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

See the Pen Leaves Falling SVG GSAP animation with Scrollmagic by Lisa Folkerson (@lisafolkerson) on CodePen.

Краски осени

Разноцветные падающие листья с праздничным посланием.

See the Pen Colours of Autumn | Changing Text Colour Character by Character by Jamie Brook (@sketchbrook) on CodePen.

Здравствуй, осень (заголовок)

Падающие листья с приветственным сообщением для приветствия посетителей сайта.

See the Pen Header by Ruben Vardanyan (@ruben-vardanyan) on CodePen.

Осеннее дерево с падающими листьями

После загрузки анимации, посетителей приветствует птица, выскакивающая из гнезда на дереве.

See the Pen gsap fall by Yi Rui (@yrui) on CodePen.

Летающие осенние листья

Развивающиеся по экрану листья.

See the Pen Autumn Leaves by mauspace (@mauspace) on CodePen.

Маленькая ведьма

Восхитительная анимация с пауком, кошкой, полной луной, метлой для украшения сайта к Хэллоуину.

See the Pen CSS Little Witch by agathaco (@agathaco) on CodePen.

Вампир и тыквы

Еще одна анимация для украшения сайта перед Хэллоуином в виде моргающего вампира с двумя тыквами.

See the Pen Vampire and Pumpkins (CSS Image) by Michael Zhigulin (@michael-zhigulin) on CodePen.

Жуткая хэллоуинская тыква

Тыква, смещающаяся и меняющая форму при наведении курсора.

See the Pen CSS Spooky Halloween Pumpkin by Jaume Sanchez (@spite) on CodePen.

Счастливый Хэллоуин

Надгробные плиты, черепа, полная луна, прыгающие фонари из тыквы и появляющийся призрак.

See the Pen Happy Halloween by Mohan Khadka (@khadkamhn) on CodePen.

Жуткий Хэллоуин

Моргающий кот, сидящий на резном фонаре из тыквы.

See the Pen CSSpooky Halloween ! by Fehrenbach Baptiste (@medrupaloscil) on CodePen.

Пожалуйста, не увлекайтесь анимациями, посетители далеко не всегда рады динамическим элементам, мешающим просмотру сайта.

По материалам сайта 1stwebdesigner.com
Иван Данилин
Автор Иван Данилин

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

Добавить комментарий