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

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

Пейзаж с оленями и анимированным фоном

Технологии: CSS, JS.
Автор: Марио Дуарте (@MarioDesigns)

Пейзаж с оленями и анимированным фоном Посмотреть живой пример


Домик: смена дня и ночи

Справа вверху можно управлять анимацией.
Технологии: CSS, SVG, GSAP.
Автор: Камерон Фицвиллиам (@CameronFitzwilliam)

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


Карта массажных точек стопы

Указатели появляются при наведении курсора на области и подписи.
Технологии: CSS, SVG, JS.
Автор: Movement (@movement)

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


Анимация прорисовки логотипа

Технологии: CSS, SVG, GSAP.
Автор: Мацей Лесзкзински (@asistapl)

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


Превращения мировых достопримечательностей

Технологии: CSS, SVG, JS.
Автор: Микаэль Айналем (@ainalem)

Превращения мировых достопримечательностей Посмотреть живой пример


Анимация с разноцветной тенью на чистом CSS

Технологии: SVG, JS.
Автор: Маттиа Асторино (@equinusocio)

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


Текучий текст

Эффект появляется при наведении курсора. Слева вверху можно ввести другой текст и нажать на кнопку «change» («изменить»).
Технологии: CSS, canvas, JS.
Автор: Декатрон (@megatroncoder)

Текучий текст Посмотреть живой пример


Звуковое сопровождение затмения

Осторожно, звук! Он появляется и увеличивается, когда вы мышкой приближаете диск к солнцу, т.е. при имитации затмения.
Технологии: CSS, JS.
Автор: PicturElements (@PicturElements)

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


Блики линз

Удерживая курсор, можно управлять обзором.
Технологии: CSS, JS: three.js.
Автор: Брайан Джонс (@bartuc)

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


Волна из кубиков

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

Волна из кубиков Посмотреть живой пример


Анимация игральных костей на CSS

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

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


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

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>

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