CSS-live.ru

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

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

  1. Извиняюсь за может быть глупый вопрос, т.е. эти анимации можно брать и свободно ими пользоваться?
    На тему авторских прав и т.п. не будет претензий?

  2. Напишу, как я это понимаю. Не совсем свободно. Зависит от того, где именно. Здесь используется Open Source лицензия MIT. Если вы берете код с анимацией и вставляете в свой проект, у которого тот же тип лицензии, то да — можно. Но только на таком условии. Об этом написано на сайте https://blog.codepen.io/legal/licensing/ (правда, на английском). Как утверждают создатели проекта, таким способом они поддерживают свободное распространение кода :)

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

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

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