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

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

Анимация с убегающим холодильником

Технологии: CSS, CSS-трансформации, CSS-анимация.
Автор: Адам Кун (@cobra_winfrey)

Анимация с убегающим холодильником Посмотреть живой пример


Сумасшедший эффект при вводе текста

Кликните по «бумаге», чтобы взять ее в фокус, и начните вводить свой текст.
Технологии: CSS, CSS-трансформации, CSS-анимация, JS.
Автор: Кори Л. (@AFrontEndDev)

Сумасшедший эффект при вводе текста Посмотреть живой пример


Переключатель в стиле «День и ночь»

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

Переключатель в стиле день и ночь Посмотреть живой пример


Анимация «улетающих» букв

Нажимайте на разные буквы, чтобы увидеть эффект.
Технологии: CSS, CSS-трансформации, CSS-анимация, JS.
Автор: Паоло Дузиони (@Paolo-Duzioni)

Анимация улетающих букв Посмотреть живой пример


Изменение цифр без «дерганья», используя свойство font-feature-setting: ‘thum’

Сравните первую и вторую строку. Во второй цифры стоят на месте, и такой вид заметно аккуратней.
Технологии: CSS, CSS-свойство font-feature-setting: ‘thum’, JS.
Автор: Йонас Бадалик (@JonasBadalic)

Изменение цифр без дерганья Посмотреть живой пример


Анимация снежного шара

Технологии: CSS, CSS-трансформации, JS.
Автор: Сара (@saelili)

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


Анимация осеннего леса

Выглядит эффектней, если вы развернете анимацию на полный экран (справа вверху кнопка «Change View» — «Full page»).
Технологии: CSS, bodymovin, JS.
Автор: DPDK (@dpdknl)

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


Как меняется дерево с мая по декабрь

Под заголовком имеется возможность управления «временем года».
Технологии: SVG, CSS, CSS-переменные, JS.
Автор: Тоби Вайншток (@tvweinstock)

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


«Электрический» эффект при наведении на кнопку

Справа вверху находятся элементы управления эффектом.
Технологии: CSS, canvas, WebGL.
Автор: Робин Делапорте (@robin-dela)

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


Верстка приложения для бронирования билета в кино на CSS

Нажимайте на «подсвеченные» блоки.
Технологии: CSS, CSS-трансформации, CSS-анимация.
Автор: Джейми Коултер (@jcoulterdesign)

Верстка приложения для бронирования билета в кино на CSS Посмотреть живой пример


«Жидкая» кнопка

Наводите на кнопку под разными углами, чтобы увидеть эффект.
Технологии: SVG, CSS.
Автор: Андреас Шторм (@andreasstorm)

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


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

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>

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