Анимированный куб

Вот такой куб можно реализовать с помощью нескольких сложных CSS-анимаций. Да, в этом проекте нет JavaScript. Для уменьшения объёма кода и упрощения настройки здесь применяется препроцессор SCSS.

Подробнее можно посмотреть здесь:

https://codepen.io/davidkpiano/pen/aqNZxX

#codepen #css #scss

Анимированная полка с вещами

Сodepen-проект «My Stuff» наглядно демонстрирует современные возможности препроцессоров для HTML и CSS, а именно Pug и SCSS. Посмотрите сами, как относительно малым количеством строк, можно реализовать интересный анимированный рисунок:

https://codepen.io/annampawl/pen/yLvoGQY

#codepen #pug #scss

Bongo Cat Codes

Вы наверняка видели этот забавный мем в виде gif’ок или видео. Автор этого проекта решил реализовать его с помощью HTML и CSS, а вернее препроцессоров Pug и SCSS. Рисунок, разумеется, сделан с помощью SVG, а анимация реализована силами CSS.

Посмотреть код можно тут:

https://codepen.io/carolineartz/pen/VwYwZaP

#codepen #pug #scss

Иконки погоды в стиле глассморфизма

Эти 4 иконки погоды выполнены в стиле глассформизма. Для создания внешнего вида и анимаций использовались HTML и SCSS. Посмотреть код и забрать его в свой проект можно тут:

https://codepen.io/onediv/full/MWQKgmv

#codepen #html #scss

Impatiently Waiting — элемент загрузки на HTML и SCSS

Больше лоадеров богу лоадеров! На этот раз предлагаем вам познакомиться с забавным вариантом, который нарисован с помощью SVG и анимирован с помощью SCSS.

С кодом проекта можно ознакомиться по ссылке: https://codepen.io/jkantner/pen/VwooLxv

#codepen #svg #scss #лоадер