CSS View Transition

Здесь анимируется CSS-свойство mask-position и transform: scale в SCSS-коде.

#css

Turning pages with CSS

Анимация перелистывания страниц, реализованная на чистом CSS.

#css

404 Concept Page

Анимация адаптивной страницы ошибки 404 на чистом CSS.

#css

Goey footer

Футер с анимацией стекающих капель. Реализован с помощью CSS.

#css

Delete Button Animation

Внутри кнопки находится svg-картинка, анимируемая при помощи CSS.

#css

CSS Typing Effect

Эффект набора текста. Реализован с помощью CSS.

#css

Weather app prototype — Scroll-driven animations

Прототип приложения для прогноза погоды. Реализовано на CSS.

#css

Liquid loader

"Жидкий" прелоадер. Реализован из SVG-элементов с анимацией на CSS.

#css

Loaders Kit | Pure CSS

Комплект анимированных лоадеров, реализованных с помощью CSS.

#css

Simple CSS Waves

Анимация волн. Реализовано на чистом CSS.

#css

Table tenniCSS

Создано на HTML и SCSS, без использования JS.

#css

CSS-only fluid slider

Создано и анимировано с использованием препроцессоров Pug и SCSS.

#css

CSS leaning card effect

Эффект карточек, расположенных под наклоном.

#css

Hamburger Menu Animations

4 вида плавной анимации для гамбургер-меню, реализованные на чистом CSS.

#css

Button with rotating gradient border

Создано и анимировано на HTML и CSS.

#css

SVG Bike 1.2

Анимация движущегося велосипеда на чистом CSS. Велосипед адаптивен и полностью построен из SVG.

#css

Link hover animation

Анимация при наведении на ссылку. Написана на чистом CSS.

#css

Pure CSS Menu

Адаптивное меню с красивой анимацией на чистом CSS.

#css

Goey footer

Футер с анимацией стекающих капель. Реализован с помощью CSS.

#css

Как создать радиальный градиент в CSS?

Для создания фона в виде радиального (кругового, эллиптического) градиента испольуется функция radial-gradient.

Самый простой градиент задаётся двумя цветами.
.element {
background-image: radial-gradient(#6e4aff, #49A16C);
}

В этом случае начальная точка помещается в центр элемента, а градиент рисуется таким образом, чтобы в углах элемента был последний указанный в скобках цвет.

Цветов мы можем перечислить сколько угодно. Браузер сам распределит градиент таким образом, чтобы последний цвет всегда заходил в угол элемента.

Форма градиента задаётся ключевым словом circle или ellipse (по умолчанию).

Мы можем задавать положение центральной точки, используя те же ключевые слова, что и для background-position, но с приставкой at: at left, at top, at right, at bottom, at center (по умолчанию). Значения можно сочетать, чтобы поместить центр градиента в нужный угол элемента: at top left — центр градиента в верхнем левом углу.

#css