Еженедельная подборка красивых эффектов на CSS/SVG/JS #65

Подборка свежих эффектов, интересных идей и полезных наработок.

Эффект 3D-печати

Технологии: CSS, Three.js, GreenSock.js.
Автор: Shaw (@shshaw)

Эффект 3D-печати Посмотреть живой пример


Нарядный переключатель

Технологии: CSS, SVG, React.js, GreenSock.js.
Автор: Крис Гэннон (@chrisgannon)

Праздничный переключатель Посмотреть живой пример


Ракета в космосе

Ракета следует за курсором, реагирует на клик и перетаскивание.
Технологии: canvas, CSS, JS.
Автор: Дэвид Лайонс (@davidlyons)

Ракета в космосе Посмотреть живой пример


Красивая анимация логотипа

Технологии: CSS-трансформации, CSS-анимация.
Автор: Юсуке Накая (@YusukeNakaya)

Красивая анимация логотипа Посмотреть живой пример


Креативное резюме с SVG-анимацией при прокрутке

Эффектнее всего выглядит в полностраничном режиме (справа вверху кнопка «Change View» — «Full Page»).
Технологии: SVG, CSS-трансформации, CSS-анимация, GreenSock.js.
Автор: Ева (@SoyEva)

Креативное портфолио с SVG-анимацией при прокрутке Посмотреть живой пример


Праздничный календарь на гридах

Кликните по карточке с датой.
Технологии: CSS, CSS-гриды.
Автор: Envato Tuts+ (@tutsplus)

Новогодний календарь на гридах Посмотреть живой пример


Рисунок девушки

Линии образуют рисунок при загрузке страницы. Чтобы посмотреть повторно, перезагрузите.
Технологии: SVG, CSS-трансформации, CSS-анимация.
Автор: Андрей Зирка (@BlackStar1991)

Рисунок девушки Посмотреть живой пример


Безликий из аниме «Унесённые призраками»

Технологии: CSS-трансформации, CSS-анимация.
Автор: aepicos (@aepicos)

Безликий из аниме Унесённые призраками Посмотреть живой пример


Радужная анимация надписи

Технологии: CSS-трансформации, CSS-анимация, JS.
Автор: Адам Кун (@cobra_winfrey)

Радужная анимация надписи Посмотреть живой пример


Эффект слайдера при наведении

Технологии: CSS-фильтры, React.js.
Автор: Поп Разван (@roppazvan)

Эффект слайдера при наведении Посмотреть живой пример


Эффектные пункты меню

Технологии: CSS-трансформации, webkit-background-clip.
Автор: Андре Кортеллини (@AndreCortellini)

Меню с webkit-background-clip Посмотреть живой пример


Пожелания и идеи по содержанию следующих выпусков приветствуем в комментариях.

P.S. Это тоже может быть интересно:

1

Комментарии

  1. Умный ребенок

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

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Ваш emeil не будет опубликован

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