Еженедельная подборка красивых эффектов на 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 Комментарии
  1. Andrey

    Велосипед на голом scss это полнейший вынос мозга O_o

    1. Ярослав

      Согласен) Настоящий CSS-маньяк))

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

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

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

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