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

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

Трансформация лошади в дракона

Технологии: CSS, JS.
Автор: Эли Фитч (@elifitch)

Трансформация лошади в дракона Посмотреть живой пример


Анимация со щупальцами

Они следуют за курсором.
Технологии: canvas, JS.
Автор: Жерар Феррандес (@ge1doot)

Анимация со щупальцами Посмотреть живой пример


Солнце из-под воды

Технологии: JS, three.js.
Автор: Лиам Эган (@shubniggurath)

Солнце из-под воды Посмотреть живой пример


Интерактивный фон

Кликните в любом месте холста, чтобы вызвать эффект.
Технологии: canvas, CSS, JS.
Автор: Блейк Боуэн (@osublake)

Интерактивный фон Посмотреть живой пример


Визитки на CSS-гридах

Анимация работает по наведению и клику на одну из стопок. Интересный скролл.
Может неправильно работать в IE.
Технологии: CSS-гриды, JS.
Автор: Джон Кантнер (@jkantner)

Визитки на CSS-гридах Посмотреть живой пример


Трехмерная надпись из блоков

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

Трехмерная надпись из блоков Посмотреть живой пример


Скейтборд

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

Анимация Первичный бульон Посмотреть живой пример


Таблица фигур Лиссажу

Технологии: JS.
Автор: Тим Северен (@timseverien)

Таблица фигур Лиссажу Посмотреть живой пример


Анимация «Павлиний хвост» на CSS

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

Анимация Павлиний хвост на CSS Посмотреть живой пример


CSS-иллюстрация «Небо и море»

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

CSS-иллюстрация Небо и море Посмотреть живой пример


Свойства типографики, влияющие на визуальную плотность текста

Технологии: CSS.
Автор: Каролин Макнейли (@carolynmcneillie)

Свойства типографики, влияющие на визуальную плотность текста Посмотреть живой пример


Подборка анимаций иконок меню-гармбургер

Технологии: CSS, JS.
Автор: Ахмад Эмран (@ahmadbassamemran)

Подборка анимаций иконок меню-гармбургер Посмотреть живой пример


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

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

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

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

Ваш E-mail не будет опубликован

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