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

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

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

Технологии: CSS, SVG, CSS анимация, GSAP.js.
Автор: Джон Хили (@jhealey5)

Смена дня и ночи Посмотреть живой пример


Анимация с монстром

Технологии: CSS, SVG, GSAP.js.
Автор: Джош Бадер (@joshbader)

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


Прогноз погоды на React

В поле ввода укажите город. Корректно работает с англоязычными названиями. Например, введите «London».
Технологии: CSS, react.js, Google API.
Автор: Поп Разван (@roppazvan)

Прогноз погоды на React Посмотреть живой пример


Брайтонский пирс: день и ночь

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

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


Часы, цифры которых тоже «состоят» из цифр

Справа внизу переключателем можно менять тему.
Технологии: CSS, JS.
Автор: Питер Нортон (@graphilla)

Часы, цифры которых тоже состоят из цифр Посмотреть живой пример


Лось в лунном свете

Технологии: CSS, CSS анимация, canvas.
Автор: Шубхам Сингх (@imshubhamsingh)

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


Анимация классического логотипа Windows

Технологии: CSS, canvas, JS.
Автор: Джон Кантнер (@jkantner)

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


Трансформации персонажей «Звездных войн» из многоугольников

Технологии: CSS, JS.
Автор: Ллойд Джеймс (@LloydJames)

Трансформации персонажей Звездных войн из многоугольников Посмотреть живой пример


Костер на CSS

Технологии: CSS анимация.
Автор: Short (@short)

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


Трансформации iPhone

Технологии: CSS, JS.
Автор: Элиор Табека (@eliortabeka )

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


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

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>

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