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

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

Робот-самурай

Технологии: CSS, GSAP.js, Greensock.js.
Автор: Джекоб (@jx2bandito)

Робот-самурай Посмотреть живой пример


Трехмерный дом на CSS

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

Трехмерный дом на CSS Посмотреть живой пример


Эксперимент с CSS-гридами для имитации изометрической разметки

Технологии: CSS-трансформации, CSS-гриды.
Автор: Энди Бэрфут (@andybarefoot)

Эксперимент с CSS-гридами для имитации изометрической разметки Посмотреть живой пример


Анимация текста в стиле пэчворк

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

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


Машина на CSS

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

Машина на CSS Посмотреть живой пример


Переключатели в стиле пиццы

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

Младенец на CSS Посмотреть живой пример


Красивая анимация текста на CSS

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

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


Велосипед на CSS

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

Велосипед на CSS Посмотреть живой пример


Эффектная анимация логотипа

Технологии: CSS-трансформации, CSS-анимация, JS.
Автор: Миша Цанкашвили (@Tsankashvili)

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


Необычное написание числа 500 с анимацией

Технологии: CSS, canvas, JS.
Автор: Йохан Карлссон (@DonKarlssonSan)

Необычное написание числа 500 Посмотреть живой пример


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

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

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

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