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

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

Эффект отражения пейзажа в надписи

Анимация работает при наведении курсора
Технологии: CSS.
Автор: Алекс (@alexpopovich)

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


Анимация с людьми во время шторма

Технологии: SVG, CSS, JS.
Автор: Иссей (@issey)

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


Разноцветная линия подчеркивания

При наведении текст выделяется тем же цветным фоном.
Технологии: CSS, JS.
Автор: Уильям Кинг (@Wking)

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


Танцующее дерево Пифагора

Анимация зависит от положения и направления движения курсора.
Технологии: canvas, JS.
Автор: Блейк Боуэн (@osublake)

Танцующее дерево Пифагора Посмотреть живой пример


Необычное украшение надписи

Технологии: CSS.
Автор: Беннетт Фели (@bennettfeely)

Необычное украшение надписи Посмотреть живой пример


Трехмерная карточка на CSS

При наведении карточка поворачивается, создавая эффект трехмерности.
Технологии: CSS трансформации.
Автор: Хаккам Абдулла (@Moslim)

Трехмерная карточка на CSS Посмотреть живой пример


Оптическая иллюзия

Линии кажутся наклонными, но на самом деле они горизонтальны. На панели справа можно менять цвет полос.
Технологии: CSS, JS.
Автор: Амит Цур (@amitzur)

Оптическая иллюзия Посмотреть живой пример


Сравнение двух изображений

Вертикальную линию-ползунок можно перемещать.
Технологии: CSS, JS.
Автор: Марио Дуарте (@MarioDesigns)

Сравнение двух изображений Посмотреть живой пример


Навигация «хлебные крошки» на CSS

Появляется при наведении курсора.
Технологии: CSS.
Автор: Андреас Шторм (@andreasstorm)

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


Анимированный пейзаж с горами

Технологии: SVG, CSS.
Автор: Ирина (@Irina-T)

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


Адаптивный слайдер на CSS

Простой слайдер изображений на CSS3 и HTML5.
Технологии: CSS
Автор: Мейер Берл (@mayurbirle)

Адаптивный слайдер на 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>

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