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

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

Слайдер на react

Технологии: CSS, react.js.
Автор: Николай Таланов (@suez)

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


Анимация с маяком

Технологии: CSS, JS.
Автор: Камерон Фицвиллиам (@CameronFitzwilliam)

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


Карта с анимированными SVG метками

Технологии: CSS, SVG, JS.
Автор: Арден (@aderaaij)

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


Косяк рыб, обтекающий текст

Анимация работает при прокрутке колесом мыши.
Технологии: CSS, SVG, JS.
Автор: Даниэль Гивенс (@danielgivens)

Косяк рыб, обтекающий текст Посмотреть живой пример


Анимация «Бабочки»

Технологии: Canvas, CSS, JS.
Автор: Йоичи Кобайаши (@ykob)

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


Конструктор Lego

Можно управлять цветом и размером элемента.
Технологии: CSS, SVG, JS.
Автор: Крис Ганнон (@chrisgannon)

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


Анимация с ножницами на CSS

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

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


Анимация с игральными картами

Кликните по колоде, чтобы раскрыть карты.
Технологии: CSS, SVG, JS.
Автор: Эндрю Кэнэм (@candroo)

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


Цветная рамка в движении при наведении

Технологии: CSS анимация.
Автор: Кэссиди Уильямс (@cassidoo)

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


Анимация с буквами

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

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


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

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

2 Комментарии
  1. Павел

    Цветная рамка в движении при наведении — не та ссылка, ссылка на скролл.
    Вот верная — https://codepen.io/cassidoo/pen/RZOWQb

    1. Светлана Павлова (Автор записи)

      Извиняюсь и благодарю! Исправила ссылку.

Добавить комментарий для Светлана Павлова Отменить ответ

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

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

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