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

Светлана Павлова Светлана Павлова

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

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

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

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

Анимация комнатных цветов на CSS

Технологии: CSS анимация.
Автор: Лорена Сарасуа (@elorenn)

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

Котик на CSS

Технологии: CSS анимация.
Автор: Дэвид Харшид (@davidkpiano)

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

Смена дня и ночи

Верхней кнопкой можно менять время суток. Удерживая солнце или луну мышкой, можно их перетаскивать вокруг планеты. Тогда будут меняться тени.
Технологии: CSS, react.js, GSAP.js.
Автор: Ксавье Казалот (@xavcz)

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

Цветной куб в движении на CSS

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

Цветной куб в движении на CSS Посмотреть живой пример

Трансформация логотипа Netflix в новую версию логотипа Sublime Text

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

Трансформация логотипа Netflix в новую версию логотипа Sublime Text Посмотреть живой пример

Астронавт на CSS

Технологии: CSS трансформации и анимация.
Автор: Энрике Родригес (@hjdesigner)

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

Стилизация под обложку альбома Radiohead «In Rainbows»

В поле ввода следует ввести текст, чтобы он появился ниже. Не более 11 символов.
Технологии: CSS, vue.js.
Автор: Даниэль Гонсалес (@dan10gc)

Стилизация под обложку альбома Radiohead In Rainbows Посмотреть живой пример

Карточка при наведении на фото, CSS

Технологии: CSS трансформации.
Автор: Ярослав В. (@YaroslavW)

Карточка при наведении на фото, CSS Посмотреть живой пример

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

Перезагружая страницу, вы меняете цвет велосипеда (цвет выбирается случайным образом).
Технологии: CSS трансформации и анимация.
Автор: Юсуке Накая (@YusukeNakaya )

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

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

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

2 комментария

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

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

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