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

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

Имитация крема на CSS

Проводя курсором по середине квадрата, вы стираете «крем» и видите текст.
Технологии: CSS-трансформации, CSS-фильтры.
Автор: Юсуке Накая (@YusukeNakaya)

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


Анимация с мельницей на CSS

Технологии: CSS, SVG.
Автор: Даниэль Гонсалес (@dan10gc)

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


Знаменитая гитара «Les Paul Junior»

Анимация работает при загрузке страницы. Чтобы посмотреть повторно, обновите ее.
Технологии: CSS, SVG, JS.
Автор: Шон Дейви (@SeanDavey)

Знаменитая гитара Les Paul Junior Посмотреть живой пример


Эксперимент с CSS-трансформациями

Наведите курсором на блок с хронологией.
Технологии: CSS-трансформации, JS.
Автор: Скотт Хендерсон (@scootman)

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


Анимация с «кремовыми» звездочками на CSS

Наведя мышкой на звездочку, вы ее увеличите.
Технологии: HTML (pug), clip-path, CSS-трансформации, CSS-анимация.
Автор: Юсуке Накая (@YusukeNakaya)

Младенец на CSS Посмотреть живой пример


Девочка и качели на CSS

Технологии: CSS-трансформации, CSS-анимация.
Автор: Динеш Баладжи (@sidthesloth92)

Офис в ночное время Посмотреть живой пример


Анимация на тему мусора в море

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

Джон Сноу на CSS Посмотреть живой пример


Выбор соцсети через чекбокс или радио-кнопку

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

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


Анимация капли воды на CSS

Технологии: CSS-трансформации, CSS-анимация.
Автор: Юсуке Накая (@YusukeNakaya)

Счастье - это когда твой код запускается без ошибки Посмотреть живой пример


Рисунок с игрой «Монополия» на CSS-гридах

(может отображаться неправильно в браузерах Internet Explorer, Edge)
Технологии: CSS, CSS vars.
Автор: Джон Коппола (@johnnycopes)

Рисунок с игрой Монополия на 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>

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