дайджест

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

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

Эффект с подчеркиванием при наведении на ссылку

Технологии: CSS-анимация.
Автор: Мехмет Бурак Эрман (@mburakerman)

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


Оптическая иллюзия с цветными кругами

Посмотрите на два круга: кажется, что это голубой и зелёный. На самом деле они одного и того же цвета циан.
Технологии: SVG.
Автор: Эллиот Гено (@pyrografix)

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


Трансформации героев фильма «Звездные войны: Последний джедай» из многоугольников

Навигация по героям — над портретами, нажимайте на кнопки для перехода. Это пятая часть серии. Ссылки на предыдущие эпизоды стоят ниже.
Технологии: CSS-трансформации, CSS-анимация, transition.
Автор: Ллойд Джеймс (@LloydJames)

Трансформации героев фильма Звездные войны: Последний джедай из многоугольников Посмотреть живой пример


Рассечение текста

Технологии: SVG clip-path, CSS-анимация, CSS-трансформации.
Автор: Микаэль Айналем (@ainalem)

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


Тени у кнопок

Подводя курсор под разными углами, обратите внимание на реалистичное поведение теней кнопок.
Технологии: WebGL, JS.
Автор: Джо Пи (@trusktr)

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


SVG-трансформации этапов процесса

Нажмите на стрелочку для перехода к следующему этапу.
Технологии: SVG, CSS, GreenSock.
Автор: Питер Биесманс (@pieter-biesemans)

SVG-трансформации в этапах процесса Посмотреть живой пример


Анимация «Первичный бульон»

Перемещайте курсор для изменения скорости анимации. На заметку: «Первичный бульон» — научный термин, связанный с теорией возникновения жизни на Земле.
Технологии: GLSL, JS.
Автор: Лиам Эган (@shubniggurath)

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


Анимация с красной точкой

Точка следует за курсором.
Технологии: canvas, JS.
Автор: Донд Лапера (@gotoandplaynowtoo)

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


Открытка с Рождественской ёлкой

Технологии: SVG, CSS, GreenSock.
Автор: Крис Гэннон (@chrisgannon)

Открытка с Рождественской ёлкой Посмотреть живой пример


Анимация «Как должен работать файрвол»

Технологии: SVG, GreenSock.
Автор: Карла (@ckroll17)

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


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

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

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

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

Ваш E-mail не будет опубликован

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