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

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

Раскладка на CSS-гридах с использованием CSS-перспективы

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

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


Красивая анимация кнопки для отправки груза

Нажмите на кнопку «Ship it».
Технологии: SVG, CSS-трансформации, GSAP.JS, greensock.js.
Автор: Nerdmanship (@nerdmanship)

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


«Змейка» из слов

Популярные слова разных языков.
Технологии: CSS, JS.
Автор: Таллула Янг (@talyYang)

Змейка из слов Посмотреть живой пример


Волшебный лес

Технологии: CSS, SVG, greensock.js.
Автор: agathaco (@agathaco)

Джон Сноу на CSS Посмотреть живой пример


Трансформация вампира

Кликните по надписи для запуска анимации.
Технологии: CSS, SVG, GSAP.js, greensock.js.
Автор: Стив Гарднер (@steveg3003)

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


Яркая анимация текста при вводе

Внизу есть поле «Start typing». Начните вводить туда свой текст.
Технологии: CSS, SVG, GSAP.js.
Автор: Рейчел Смит (@rachsmith)

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


Неоновая вывеска

Технологии: CSS-анимация, JS.
Автор: Эд Хикс (@blucube)

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


Мировые часы с погодой

Кликом по блоку города можно его увеличить.
Технологии: CSS, React.js, moment.js.
Автор: Тоби Вайншток (@tvweinstock)

Мировые часы с погодой Посмотреть живой пример


Эффектное появление текста на CSS

Технологии: CSS-анимация.
Автор: Нурей Йемон (@yemon)

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


Анимация на тему космоса

Технологии: CSS-анимация, CSS-трансформации, clip-path.
Автор: Вангель Джо (@srekoble)

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


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

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>

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