Toggles - Анимированные чекбоксы на чистом css

#pure_css

Dandelion - одуванчик на канвасе. Реагирует на движение курсора.

#pure_css

Almost before we knew it ❤️ - Это готовая анимация, в которую можно вписать текст для интро и аутро. Таким образом появляется возможность написать о своих чувствах конкретному человеку, скопировать ссылку на пен с изменённым текстом и отправить адресату. Кириллица поддерживается, но шрифт при этом становится стандартным.

#pure_css

Candle Flame Animation - Анимация пламени свечи на чистом CSS. Получилось действительно очень реалистично.

#pure_css

Slinky Text - Немного css магии font-variation-settings, -webkit-background-clip, -webkit-text-fill-color приправленной js и прикольный эффект над текстом.

#pure_css

Волна частиц — волна на canvas из летящих частиц

#pure_css

Glitch Effect on Hover - При наведении на изображение воспроизводится глитч эффект. Сделано на CSS за счет использования одного и того же изображения несколько раз.

#pure_css

Fluid text hover - При hover на текст его фон становится текучим, как жидкость.

#pure_css

A colourful world of Turbulence - Разноцветные частицы закручиваются в одну или несколько спиралей на канвасе. По клику генерируется новая случайная картинка.

#pure_css

Organic Onboarding - Для эффекта размытия в местах сопряжения слайдов используется SVG c фильтром размытия

#pure_css

CSS Filter Cards - Hover эффект на CSS использующий фильтры для заблюривания неактивных карточек

#pure_css

Simple WebGL Galaxy - Простая реализация галактики на three.js. В шейдерах используется текстура картинки звезды.

#pure_css

Distortion Effect - Эффект перетекания одного изображения в другое на шейдерах, с gsap анимацией на канвасе

#pure_css #js

Hamburger Icons Animations — Анимации иконки гамбургера в нескольких разных вариациях на CSS

#pure_css

Interactive Nintendo GameBoy — GameBoy от Nintendo на CSS с той самой мелодией включения

#pure_css #js

Only CSS: STARFOX Arwing Drone - Космический истребитель STARFOX Arwing Drone из игры, который воспроизвели с анимацией полета в космосе на чистом CSS

#pure_css

Using VW inside TranslateZ — Параллакс эффект, созданный на CSS. Тридцать дивов с одним и тем же фоном из цветов, абсолютно с позиционирован и, благодаря координате Z, каждый из дивов смещен на уровень ниже, относительно другого.

#pure_css

Perpendicular lines — Анимированные перпендикулярные линии на канвасе с привязкой к движению курсора.

#pure_css

CSS BEER! - Кружка пива, которая наполняется пивом. Сделано на CSS и с использованием SVG.

#pure_css

Snail | Pure CSS - Анимация улитки на чистом CSS

#pure_css

Drifting car loader — Загрузчик для страницы в виде дрифтующей по кругу машины. Анимация на CSS, машинка это SVG.

#pure_css