20 потрясающих CSS3 техник, библиотек и примеров
В этом списке мы собрали для вас лучшие ресурсы с примерами CSS3 техник, а также демо-сайты различных разработчиков, раскрывающие се богатство CSS.
В список также включены англоязычные статьи, обрисовывающие новые фичи в CSS3 и несколько полезных библиотек, наполненных разными фишками.
Для полного эффекта от просмотра ссылок из данной статьи рекомендуем пользоваться последней версией современного браузера, например, хромом.
Прекрасно исполненная версия меню на чистом CSS. На самом деле здесь представлено целых семь разных вариантов, в каждом из которых используются новые функции перехода в CSS3 и с умом применяются селекторы для создания безупречного эффекта размытия. Посмотреть на код можно здесь.
На этом демо-сайте можно сгенерировать крайне реалистичные облака и даже поиграть с ними. Демо-код достаточно сложный, поскольку использует 3D-Transform функции CSS3 и JavaScript. Подробную инструкцию на английском можно прочитать здесь.
Здесь собраны логотипы известных компаний: изготавливались логотипы хардкорно, только с помощью CSS. При наведении мышкой на лого вы увидите, какие именно CSS-свойства использовались для создания изображений. На github можно посмотреть полный код.
Ещё один пример творческого подхода к CSS. Каждый пост этого tumblr-журнала представляет собой анимированную букву алфавита, оживающую с помощью CSS.
Простая, но стильная панель навигации. Её CSS-код состоит всего из 65 строк, но это не мешает ей оставаться эффектной. Глубина пространства создаётся опять же за счёт новых функций перехода и трансформации в CSS3.
Это CSS-версия простой Google Doodle анимации. Выполнена очень аккуратно, работает быстро, и никакого JavaScript!
Ещё один классный проект, посвящённый слайдерам для изображений. Он тоже работает как часы, не содержит ни капли JavaScript. Проект состоит из четырёх разных вариантов реализации и учебника. Руководство на английском можно почитать здесь.
Славное анимированное колечко, выполненное с помощью одного-единственного div-элемента и менее сотни строк CSS-кода.
Очередная демонстрация использования последних функций CSS3 — переходов, фильтров, 3D-трансформаций и проч. Сама по себе демонстрация не очень впечатляет, но вы только подумайте, сколько классного можно сделать, добавив ещё пару слоёв.
А вот несколько полезных статей и руководств о новых функциях CSS3.
Руководство о том, как создать цветное меню навигации с анимированными выпадающими элементами. Никаких фокусов с изображениями или JavaScript — только чистый CSS.
Если вам интересны новые фильтры CSS, вы должны это прочесть. В этом пособии вы встретите множество удачных примеров использования фотофильтров, а также полезную информацию о поддержке фильтров браузерами и вопросах производительности.
Одна из лучших статей в мире о CSS. В ней представлены CSS-формы и множество примеров того, как их создавать и использовать. Читать немедленно.
В этом руководстве авторы объясняют, как создать простые индикаторы выполнения процесса без использования сложных скриптов. Градиенты, полоски, эффектные отблески: вот это всё сделано с помощью CSS3-техник. Конечный результат выглядит безупречно.
Очень популярный на github проект. И не зря! Всё выполнено на CSS и значительно повышает производительность веб-проекта.
Spinkit — это коллекция настраиваемых индикаторов загрузки. А индикаторы загрузки нужны всем.
Что же вы увидите, перейдя по ссылке? Большую коллекцию кнопок.
Классное приложение, которое позволяет настроить кнопки-“выключатели” под себя и скопировать полученный CSS-код. А ещё там есть кнопки-“выключатели”, используемые в популярных ОС.
СSS-библиотека подсказок для сайта, не требующих JavaScript.
Проект Colors.css нужен для тех, кто ненавидит подборку hex-кодов цветов. Это приятная альтернатива встроенному цветовому редактору.
Итак, надеемся, эти примеры и советы вдохновят вас на создание интересных и удобных CSS-поделок!
СSS Примеры
CSS Синтаксис
Селектор элементов
Селектор идентификатор
Селектор классов (для всех элементов)
Группировка селекторов
Объяснение
CSS Цвет Фона
Установить цвет фона страницы
Установить цвет фона различных элементов
Установить изображения в качестве фона страницы
Установить повторение фонового изображение только по горизонтали
Установить фоновое изображение
Установить фиксированное фоновое изображение
Установить все свойства фона в одном объявлении
Установить расширенный фон
Объяснение
CSS Границы
Установить ширину четырех границ
Установить ширину верхней границы
Установить ширину нижней границы
Установить ширину левой границы
Установить ширину правой границы
Установить стиль верхней границы
Установить стиль нижней границы
Установить стиль левой границы
Установить стиль правой границы
Установить цвет четырех границ
Установить цвет верхней границы
Установить цвет нижней границы
Установить цвет левой границы
Установить цвет правой границы
Установить все свойства границы в одном объявлении
Установить закругленные границы к элементу
Установить разные границы на каждой стороне
Установить все свойства верхней границы в одном объявлении
Установить все свойства нижней границы в одном объявлении
Установить все свойства левой границы в одном объявлении
Установить все свойства правой границы в одном объявлении
Объяснение
CSS Поля
Установить различные поля для каждой стороны элемента
Использовать сокращенное свойство полей с четырьмя значениями
Использовать сокращенное свойство полей с тремя значениями
Использовать сокращенное свойство полей с двумя значениями
Использовать сокращенное свойство полей с одним значением
Установить внутренние поля на авто до центра элемента внутри контейнера
Установить чтобы левое поле наследовалось от родительского элемента
Установить крах внутренних полей
Объяснение
CSS Отступы
Установить разные отступы для каждой стороны элемента
Использовать собирательное свойство отступов с тремя значениями
Использовать собирательное свойство отступов с двумя значениями
Использовать собирательное свойство отступов с одним значением
Установить отступы и ширину элемента (без размера коробки)
Установить отступы и ширину элемента (ширина коробки)
Установить отступы слева от элемента
Установить отступы справа от элемента
Установить отступы сверху от элемента
Установить отступы снизу от элемента
Объяснение
CSS Высота и Ширина
Установить высоту и ширину элемента
Установить максимальную ширину элемента
Установить высоту и ширину изображения в процентах
Установить минимальную ширину и максимальную ширину элемента
Установить минимальную высоту и максимальную высоту элемента
Объяснение
CSS Бокс Модель
Демонстрация модели коробки
Установить элемент с общей шириной 350 пикселей
Объяснение
CSS Контур
Нарисовать линию вокруг элемента (контур)
Установить стиль контура
Установить цвет контура
Установить контур-цвета: инвертировать контур
Установить ширину контура
Использовать свойство shorthand контура
Добавить пространство между контуром и краем/границ элемента
Объяснение
CSS Текст
Установить цвета текста различных элементов
Установить выровнивание текст
Установить удаление линии под ссылками
Украсить текст
Управление буквами в тексте
Установить отступ текста
Установить пробел между символами
Установить расстояние между строками
Установить направление текста элемента
Увеличить пробелы между словами
Установить текстовую тень для элемента
Установить отключение перенос текста внутри элемента
Установить вертикальное выравнивание изображения в тексте
Объяснение
CSS Шрифт
Установить шрифт теста
Установить размер шрифта
Установить размер шрифта в px
Установить размер шрифта в em
Установить стиль шрифта
Установить вариант шрифта
Установить толщину шрифта
Установить все свойства шрифта в одном объявлении
Объяснение
CSS Иконки
Установить иконки Font Awesome
Установить иконки Bootstrap
Установить иконки Google
Объяснение иконок
CSS Ссылки
Установить разные цвета для посещенных/непосещенных ссылок
Установить оформления текста на ссылках
Установить цвет фона для ссылок
Установить другие стили в гиперссылки
Установить различные типы курсоров
Дополнительно — создание полей ссылок
Дополнительно — создание полей ссылок с границами
Объяснение
CSS Списки
Установить все различные маркеры элементов списка в списке
Установить изображение как маркер элемента списка
Установить позицию маркера элемента списка
Удалить маркеры настроить по умолчанию
Установить все свойства списка в одном объявлении
Установить списки стилей с цветом
Установить полную ширину списка границ
Объяснение
CSS Таблицы
Указать черную границу для элементов таблицы, th и td
Использовать свернутые границы
Одиночная граница вокруг таблицы
Задать ширину и высоту таблицы
Установить выравнивание содержимого по горизонтали (выравнивание текста)
Установить вертикальное выравнивание содержимого (вертикальное выравнивание)
Указать отступ для элементов th и td
Горизонтальные делители
При наведении на таблицу
Полосатая таблица
Указать цвет заголовка таблицы
Установить положение заголовка таблицы
Отзывчивая таблица
Создать шикарную таблицу
Объяснение
CSS Дисплей
Как скрыть элемент (видимость: скрыто)
Как не отображать элемент (дисплей: нет)
Как отобразить элемент уровня блока в качестве встроенного элемента
Как отобразить встроенный элемент, элемент уровня блока
Как использовать CSS вместе с JavaScript для отображения скрытого содержимого
Объяснение
CSS Позиционирование
Позиция элемента фиксированная относительно окна браузера
Позиция элемента относительно его нормального положения
Позиция элемента с абсолютным значением
Липкое позиционирование
Перекрывающиеся элементы
Установить форму элемента
Установить изображение в верхнем крае с использованием значения пиксел
Установить изображение в нижнем крае с использованием значения пиксел
Установить изображение в левом крае с использованием значения пиксел
Установить изображение в правом крае с использованием значения пиксел
Позиция текста в изображении (верхний левый угол)
Позиция текста в изображении (верхний правый угол)
Позиция текста в изображении (верхний левый угол)
Позиция текста в изображении (нижний правый угол)
Позиция текста в изображении (по центру)
Объяснение
CSS Переполнение
Использовать overflow: visible — переполнение не обрезается. Оно отображается вне поля элемента.
Использовать overflow: hidden — переполнение обрезается, а остальная часть содержимого скрыта.
Использовать overflow: scroll — переполнение обрезается, но добавляется полоса прокрутки для просмотра остального содержимого.
Использовать overflow: auto — если переполнение обрезается, следует добавить полосу прокрутки, чтобы увидеть остальную часть содержимого.
Использовать overflow-x и overflow-y.
Объяснение
CSS Поплавок
Простое использование свойства поплавок
Изображение с рамкой и полями, плавающее справа в параграфе
Изображение с подписью, которое плавает справа
Пусть первая буква параграфа плавает слева
Создание плавающих элементов со свойством поплавок
Отключение поплавок (с помощью свойства очистить)
Создать горизонтального меню
Создать домашнюю страницу без таблиц
Объяснение
CSS Выравнивание
Выравнить поля по центру
Выравнить текст по центру
Изображение по центру
Выравнить влево/вправо по позиции
Выравнить влево/вправо — Кроссбраузерное решение
Выравнить влево/вправо поплавок
Выравнивание влево/вправо с помощью решения поплавок — Кроссбраузерное решение
По центру вертикально с отступом
По центру вертикально и горизонтали
По центру вертикально с высотой линии
По центру вертикально и горизонтально с позиции
Объяснение
CSS Комбинаторы
Потомок селектора
Ребенок селектора
Брат селектора
Генеральный брат селектора
Объяснение
CSS Генерируемое содержимое
Вставить URL в скобках после каждой ссылки свойство content
Нумерация разделов и подразделов с «разделом 1», «1.1», «1.2», и т.д.
Указать кавычки со свойством quotes
CSS Псевдо классы
Добавить различных цвета к гиперссылке
Добавить других стили к гиперссылке
Использовать фокус
Подбор первого элемента p
Подбор первого элемента i во всех элементах p
Подбор всех элементах i во всех первых дочерних элементах p
Использовать язык
Объяснение
CSS Псевдо элементы
Установить первую букву в тексте
Установить первую строку в тексте
Установить первую букву и первую строку
Вставить содержимое перед элементом
Вставить содержимое после элемента
Объяснение
CSS Непрозрачность
Создать прозрачность изображения
Создать прозрачность изображения — эффект наведения мыши
Создать обратный эффект прозрачности изображений — эффект наведения мыши
Создать прозрачность бокса / div
Создать прозрачность бокса / div с RGBA значениями
Создать прозрачность поля с текстом на фоновом изображении
Объяснение
CSS Навигационная Панель
Полностью стилизованная вертикальная панель навигации
Полностью стилизованная горизонтальная панель навигации
Объяснение
CSS Выпадение
Выпадающий текс
Выпадающее меню
Выпадающее меню по правому краю
Выпадающее изображение
Выпадающее навигационная панель
Объяснение
CSS Подсказки
Правая подсказка
Левая подсказка
Верхняя подсказка
Нижняя подсказка
Подсказка со стрелкой
Анимированная подсказка
Объяснение
CSS Галерея Изображений
Галерея Изображений
Отзывчивая галерея изображений
Объяснение галереи изображений
CSS Спрайт Изображений
Спрайт изображений
Спрайт изображения — список навигации
Спрайт изображения с эффектом наведения
Объяснение
CSS Атрибуты Селекторов
Выбрать все элементы <a> с атрибутом target
Выбрать все элементы <a> с атрибутом target= «_blank»
Выбрать все элементы с атрибутом title, содержащим разделенный пробелами список слов, одним из которых является «flower»
Выбрать все элементы со значением атрибута класса, которое начинается с «top» (должно быть целое слово)
Выбрать все элементы со значением атрибута класса, которое начинается с «top» (не должно быть целым словом)
Выбрать все элементы со значением атрибута класса, которое заканчивается на «test»
Выбрать все элементы со значением атрибута класса, содержащим «te»
Объяснение
CSS Формы
Поле ввода полной ширины
Поле ввода дополненное
Поле ввода с границами
Поле ввода снизу
Поля ввода цветные
Поля ввода сфокусированные
Поля ввода сфокусированные 2
Поле ввода иконка / изображение
Поле ввода анимированный поиск
Стиль текстовой области
Стиль меню выбора
Стиль кнопки ввода
Объяснение
CSS Счетчики
Создание счетчика
Вложенные счетчики 1
Вложенные счетчики 2
Объяснение
CSS3 Закругленные углы
Создание закругленных углов к элементам
Создание закругленных углов вокруг каждого угла отдельно
Создание эллиптических углов
Объяснение
CSS3 Изображения Границ
Создать границу изображения вокруг элемента с помощью ключевого слова round
Создать границу изображения вокруг элемента с помощью ключевое слово stretch
Граница изображения — разные значения среза
Объяснение
CSS3 Фон
Добавить несколько фоновых изображений для элемента
Указать размер фонового изображения
Масштабировать фонового изображения «contain» и «cover»
Определение размеров нескольких фоновых изображений
Полный фон изображения (полностью заполняет область содержимого)
Использовать background-origin, чтобы указать расположение фонового изображения
Использовать background-clip для указания области рисования фона
Объяснение
CSS3 Градиенты
Линейный градиент — сверху вниз
Линейный градиент — слева направо
Линейный градиент — по диагонали
Линейный градиент — под определенным углом
Линейный градиент — несколько цветов
Линейный градиент — с цветом радуги + текст
Линейный градиент — с прозрачностью
Линейный градиент — повторяется
Радиальный градиент — равномерное размещение цвета
Радиальный градиент — по другому расставленные цвета
Радиальный Градиент — фигуры
Радиальный градиент — ключевые слова разные размеры
Радиальный градиент — повторяется
Объяснение
CSS3 Теневой Эффект
Добавить простой эффект тени
Добавить цвет к тени
Добавить эффект размытия к тени
Добавить белый текст с черной тенью
Добавить красную неоновую тень
Добавить красную и синию неоновую тень
Добавить белый текст с черной, синей и темно-синей тенью
Добавить box-shadow — тень к элементу
Добавить box-shadow — цвет к элементу
Добавить box-shadow — размытие цвета
Создание paper-like — карточка (с текстом)
Создание paper-like — карточка (изображений с текстом)
Добавить свойство box-shadow
Объяснение
CSS3
CSS3 — это новая версия каскадных таблиц стилей. Я, надеюсь, не нужно объяснять, зачем нужен вообще CSS. Если нужно, то сначала обратите внимание на категорию по основам CSS, а уже потом можно будет изучать и новую версию.
В CSS3 появилась масса новых возможностей, которые в разы упрощают огромное количество задач. Помните, сколько Вам бед доставляло закругление обычного div? Сколько картинок приходилось вырезать, сколько блоков добавлять, сколько стилей прописывать? Теперь же ничего лишнего нет: 1 блок div и одно свойство border-radius, закругляющее рамку. Всё.
Появилась так же возможность добавлять градиенты, несколько фонов на один блок. Теперь можно делать лёгкую анимацию на CSS3, что само по себе уже чудо, поскольку раньше для подобных эффектов требовался JavaScript.
Такие вещи как тени, раньше отнимающие кучу нервов и времени, теперь реализуются так же всего одним свойством из CSS3.
В общем, расписывать все новые возможности надо достаточно долго. Одно могу сказать точно: если Вы изучите CSS3, что сделать совсем легко, если знаете предыдущую версию CSS, Ваша жизнь как верстальщика значительно упростится.
Прочитав статьи по CSS3, Вы узнаете:
1) Как создавать тени для текста и блоков.
2) Новые способы задания цвета в CSS3.
3) Как закруглить углы на CSS3.
4) Как делать плавные переходы на CSS3.
5) Как трансформировать объекты на CSS3.
6) Как сделать анимацию на CSS3.
7) Как задать несколько фоновых изображений на CSS3.
8) Как разбить текст на несколько колонок с помощью CSS3.
9) Как верстать круглые кнопки на CSS3.
10) Примеры теней на CSS3.
11) Как задавать градиенты в CSS3.
12) Как сделать комментарии в виде пузырька на CSS3.
13) Новое свойство CSS3 — box-sizing.
14) Новый псевдокласс CSS3 — nth-child.
15) Новый псевдокласс CSS3 — not.
16) Новые псевдоклассы CSS3 — only-child и only-of-type.
17) Новые псевдоклассы CSS3 — valid и invalid.
18) Новые псевдоклассы CSS3 — read only и read write.
19) Новые псевдоклассы CSS3 — in-range, out-of-range и indeterminate.
20) Как сделать эффект серого оттенка на CSS.
21) Зачем нужен псевдокласс target в CSS3.
22) Как сделать аккордион на чистом CSS3.
23) Как сделать эффект вдавленного текста на CSS3.
24) Новые свойства CSS3 — box-ordinal-group и box-orient.
25) Новые свойства CSS3 — nav-left, nav-right и nav-up.
26) Как сделать навигационное меню на HTML5 и CSS3, используя псевдокласс target.
27) Как сделать красивые анимации на CSS3, используя библиотеку Animate.css.
28) Зачем нужна функция calc() в CSS3.
29) Как сделать анимацию загрузки на чистом CSS3.
30) Как сделать пролистывающийся текст на чистом CSS3.
31) Как добавить эффект перехода аккордеону на CSS3.
32) Как сделать блоки со слайдер эффектом на чистом CSS3.
33) Как сделать 3D менюшку на чистом CSS3.
34) Зачем нужно свойство flexbox в CSS3.
35) Как сделать прелоадер на чистом CSS3.
36) Как сделать слайдер на чистом CSS3 без использования JavaScript.
37) Как сделать выскальзывающее меню на CSS3.
38) Как сделать прогресс бар на чистом CSS3.
39) Как сделать изогнутую тень на чистом CSS3.
40) Как сделать многоуровневое меню-аккордион на CSS3.
41) Как установить иконки загрузки на чистом CSS3.
42) Как сделать индикатор прокрутки на CSS3.
43) Как сделать выпадающее меню на чистом CSS3.
44) Как применять свойство CSS background-image в веб-дизайне.
45) Как использовать свойство float в CSS.
46) О свойстве float на практике.
47) Основные типы CSS селекторов.
48) Что лучше Opacity или RGBA в CSS3.
49) Как сделать адаптивное меню на flexbox.
50) Как сделать изображения адаптивными в CSS3.
51) Как сделать адаптивную верстку на flex CSS. Часть 1.
52) Как анимировать элементы сайта. Часть 2.
53) Как просто разместить текст в колонки.
54) Как сделать плавный переход в CSS — transition.
55) О свойстве transform CSS на примерах.
56) Как применять filter grayscale на практике.
57) Как сделать красивый эффект при наведении.
58) Как сделать hover эффект для кнопки.
59) Как сделать всплывающие подсказки при наведении.
60) Как сделать полупрозрачный текст на фоне в CSS.
61) Как сделать плавное подчеркивание ссылки при наведении.
62) Как сделать анимированную кнопку обратного звонка.
63) Как использовать иконки Font Awesome на сайте.
64) Как сделать адаптивное меню для сайта. Часть 1.
65) Как сделать адаптивное меню для сайта. Часть 2.
66) Как сделать прелоадер на чистом CSS.
67) Как сделать иконки соц сетей на CSS.
68) Как сделать вертикальное меню на CSS.
69) Как сделать прозрачную панель навигации в CSS.
70) Как сделать выезжающее боковое меню. Часть 1.
71) Как сделать выезжающее боковое меню.Часть 2.
72) Как сделать поворот 3d картинки в CSS.
73) Как сделать CSS эффект при наведении на ссылку.
74) Как сделать анимацию текста в CSS.
75) Как создать градиент поверх фоновой картинки в CSS.
76) Как сделать CSS анимацию при прокрутке страницы.
77) Как сделать анимацию при скролле на WordPress.
78) Что такое CSS позиционирование блоков.
79) Как сделать адаптивную форму обратной связи.
80) Как сделать адаптивное навигационное меню с иконками.
81) Как позиционировать текст на картинке в CSS.
82) Как сделать alert кнопку в CSS.
83) Как создать адаптивную контактную форму.
84) Как сделать таблицу адаптивной.
85) Как сделать поиск по сайту на HTML.
86) Как сделать чекбокс на HTML/CSS.
87) Как сделать карточку товара на CSS.
88) Как изменить маркер списка.
89) Как сделать фиксированное меню.
90) Как сделать адаптивную шапку сайта (float vs flex).
91) Как сделать анимацию блока и картинки в CSS.
92) Как сделать иконку гамбургер-меню на CSS+JS.
93) Как сделать меню для мобильной версии сайта.
94) Как создать иконки для меню сайдбара.
95) Как сделать выравнивание по центру блока внутри блока.
96) Как сделать блок с отзывами на HTML.
97) Как выделить блок текста на CSS.
98) Как сделать купон на CSS.
99) Про CSS эффекты при наведении на картинку.
100) Как сделать карточку блог поста на CSS.
101) Как изменить шапку сайта (часть 1).
102) Как изменить шапку сайта (часть 2).
103) Как изменить шапку сайта (часть 3).
104) Как сделать верстку портфолио на flexbox (часть 1).
105) Как сделать верстку портфолио на flexbox (часть 2).
106) Как сделать стилизацию select на CSS.
107) Как сделать стилизацию radio на CSS.
108) Про верстку формы и скрипт выбора даты.
109) Единицы измерения em, rem, vh, vw, vmin, vmax.
110) SVG спрайты.
111) Верстка формы входа (часть 1).
112) Верстка формы входа (часть 2).
113) Верстка формы входа (часть 3).
114) Адаптивная таблица для мобильных устройств.
115) Установка тени для блока и текста в CSS.
116) Как использовать псевдо классы в CSS.
117) Эффект тени при наведении в CSS.
118) CSS свойство position: sticky.
119) Вертикальный аккордеон на чистом CSS.
120) Управление размерами flex-элементов.
121) Flex блоки на примере шапки.
122) Выравнивание элементов формы на flex.
Все материалы по CSS3
CSS3 Анимация: 10 Впечатляющих примеров
Одни из лучших примеров CSS3 анимации.
Свойства CSS3 открыли огромное количество новых дверей для веб-разработчиков и дизайнеров, позволяя создавать анимацию и интерактивность прямо в CSS разметке, обходя стороной Flash, Silverlight или After Effects. Ниже мы собрали лучшие примеры CSS3 анимации, включая отдельные эффекты и сайты.
One Shared House – это веб-документалка об опыте UX дизайнера Ирен Перейры (Irene Pereyra), которая была частью феминистской коммуны в 1970-х годах в Амстердаме. Как только вы попадете на сайт, то будете не одни: за движениями вашего курсора будут следить.
Вместо банального скроллинга Перейра и ее портнер Антон Реппонен (Anton Repponen) черпали вдохновение из игры ‘Where in the World is Carmen Sandiego?’ ранних 90-х. Они использовали нижний экран, чтобы разделить контент, давая вам возможность по-совему определить уровень вовлечения в историю.
Взаимодействие сочетается с повествованием, чтобы придать завораживающий и новый опыт. Также важна смелость и упорство Перейры и Реппонена, которые вели этот само-финансируемый проект в течение двух лет: “Это позволяет нам эксперементировать с дисциплинами и техниками, для которых обычно нет места в клиентских проектах”, – говорит Перейра.
02. Type Terms
Type Terms – это анимированная шпаргалка, созданная Supremo – веб-дизайн агенством из Манчестера. Проделав некоторые исследования, они обнаружили, что самая интересная информация в сети о типографике представляет собой простые, статичные картинки. Команде нужен был повод для эксперемента с SVG и CSS анимацией, и это стало прекрасной возможностью.
“Я решил создать что-нибудь визуально привлекательное, что помогло бы помочь новым дизайнерам в изучении ключевых типографических правил”, – говорит дизайнер Дэн Хэйвуд (Dan Heywood).
Команда подчеркивает важность того, чтобы дизайнеры хорошо разбирались в типографике. Для тех, кто впервые изучает правила, или для опытных дизайнеров, нуждающихся в переподготовке, этот чит-лист является одновременно учебным и приятным для изучения. Контент сфокусирован, информация понятна, а CSS анимация гладкая и плавная.
03. Waaark
Любое взаимодействие на сайта Waaark открывает невероятное внимание к деталям. Арт директор Джимми Рахериарисоа (Jimmy Raheriarisoa) и фронтенд разработчик Антон Водняк (Antoine Wodniack), создавшие студию French, все продумали. Они распланировали как будут меняться сцены с одной страницы на другую, как меркнет текст и какой будет анимация для SVG графики.
Все воплощается в жизнь, сохраняя при этом производительность и доступность. Они добавили горячие клавиши, чтобы сделать опыт использования лучше для всех людей.
Отвечая на вопрос о своем недавно выпущенном портфолио, Водняк пояснил, что взаимодейсвие было ключевым моментом: «Интернет становится все более и более креативным, и становится необходимым образовывать творческий дуэт между разработчиком и дизайнером. Разработчикам всегда нужны новые испытания, а Дизайнеры нуждаются в решениях, чтобы сделать их идеи возможными ».
04. Periodic table
Периодическая таблица элементов – это популярный объект для дизайнеров, чтобы продемонстрировать новые веб технологии. Разработанная веб дизайнером из Барселоны Рикардо Кабелло (Ricardo Cabello) – эта таблица при первом запуске собирается из множества анимированных элементов.
Эту таблицу можно крутить в разных направлениях с помощью мышки. Также можно изменить форму таблицы внизу страницы.
Кабелло проэкспериментировал, сможет ли он использовать свою JavaScript библиотеку three.js, чтобы перенести эффекты из демо в игровой движок famo.us.
Кабелло также опубликовал видео, демонстрирующее работу демо на iPad 2:
05. CSS Creatures
Все мы знаем, что работа в дизайн индустрии иногда может стать монотонной, так что оторвитесь от своего расписания и повеселитесь с этим милым маленьким CSS проектом.
CSS Creatures позволяет пользователям создавать и анимировать для себя собственного веб-приятеля. Звучит здорово? Все что нужно сделать это отправить твит на @CSSCreatures с желаемым цветом, характером и функциями. Ваше CSS создание появится на сайте менее чем за 25 секунд!
06. AT-AT Walker from Star Wars
Эта иллюстрированная CSS3 анимация создана Энтони Калзадилла (Anthony Calzadilla). Кликните на “view the bones” ссылку на iPad и увидите, как кажая деталь двигается и функционирует.
07. GT America
Grill Type выпустил новый шрифт GT-America. Каждая часть этого сайта рассказывает историю о шрифте.
GT-America назван в честь страны, в которой черпал вдохновение, — Соединенных Штатов. Здесь более 40 анимаций, созданных дизайнером Джошем Шаубом (Josh Schaub). Вы даже можете взаимодействовать с сайтом, чтобы оживить иллюстрации. Нам нравится, как использовалась анимация и видео, чтобы показать невероятную гибкость шрифта.
08. Caaaaaaaat
Японский веб дизайнер и интерактивный директор Масаюки Кидо (Masayuki Kido) создал этого анимированного котика, который растягивается по ширине окна браузера. Сделайте окно достаточно узким и слово изменится с забавными последствиями. Это не все, что может предоставить сайт, но мы не хотим оставлять спойлеров – идите и посмотрите сами!
09. Greenwich Library
Обычно сайты публичных услуг не отличаются красотой и удобством, но сайт бибилиотеки Гринвича – исключение из правил. Дизайн этого сайта является результатом двух лет исследований, тестирования и разработки.
Наш самый любимый момент – это иллюзия отрисовки элементов при прокрутке. Обычно этот трюк создается с помощью SVG, но в данном случае использовались обычные CSS анимации и расслоение элементов, которые выглядят даже интереснее сложной SVG графики.
10. Interactive album covers
Многие обложки классических музыкальных альбомов не только были переделаны на CSS, но они даже реагируют на музыку! Демонстрация включает First Impressions от Stroke и Joy Division’s Unknown Pleasures. Важно: работает только в Google Chrome.
Читайте также:
Перевод статьи 10 impressive examples of CSS3 animation
Авторы оригинального текста: Aaron Kitney, Claudina Sarahe, Creative Bloq Staff
34 примера CSS анимации текста и изображения
Веб-дизайн admin 2 Комментариев HTML, вдохновение, дизайнВеб-анимация прошла долгий путь и, в наши дни, с возможностью анимации элементов с использованием CSS3, проще, чем когда-либо, оживить пользовательский интерфейс с некоторыми переходами CSS, CSS-преобразованиями и анимациями CSS.
Анимация может влиять на эмоции пользователя, информировать его и направлять его внимание.
5 идей для захватывающего фона сайтаСодержание
- 1 Handwritting Text Animation
- 2 Terminal
- 3 Smoky
- 4 Peeled Text Transforms
- 5 CSS Paper Text
- 6 LOVE
- 7 Colorful
- 8 Rotating text
- 9 Auto Typing
- 10 Text Transform
- 11 Transmission: Glowing Text Animation
- 12 Emblem – Auto generate circular text
- 13 CSS Perspective Text Hover
- 14 Simple
- 15 Title
- 16 Image revealing from text on hover
- 17 Glitch text with image background
- 18 Animated highlighted text
- 19 Fly in, fly out
- 20 Floating Text
- 21 Text Animation with background
- 22 VelocityJS demo
- 23 Particles write text
- 24 Animated text fill
- 25 Neon Text Effect
- 26 motion graphic typeface
- 27 Animated Type Loader
- 28 Material Card with Animated Featured Image
- 29 Fully Responsive Layout With Nice Animation
- 30 Zoom + pan the image on hover & mouse move
- 31 Shattering Images
- 32 Building Images
- 33 Image Overlay Slider
- 34 Image hover effect
Handwritting Text Animation
Terminal
Smoky
Peeled Text Transforms
CSS Paper Text
LOVE
Colorful
Rotating text
Auto Typing
Text Transform
Transmission: Glowing Text Animation
Emblem – Auto generate circular text
CSS Perspective Text Hover
Simple
Title
Image revealing from text on hover
Glitch text with image background
Animated highlighted text
Fly in, fly out
Floating Text
Text Animation with background
VelocityJS demo
Particles write text
Animated text fill
Neon Text Effect
motion graphic typeface
Animated Type Loader
Material Card with Animated Featured Image
Fully Responsive Layout With Nice Animation
Zoom + pan the image on hover & mouse move
Shattering Images
Building Images
Image Overlay Slider
Image hover effect
СSS3 Медиа Запросы — Примеры
CSS Медиа запросы — примеры
Рассмотрим еще несколько примеров использования медиа запросов.
Медиа запросы — популярный метод установки адаптированной таблицы стилей на различные устройства.
Чтобы продемонстрировать простой пример, мы можем изменить цвет фона для разных устройств:
Пример
/* Установите цвет фона body tan */body {
background-color: tan;
}
/* На экраны, которые 992px или меньше, установить цвет фона blue */
@media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* На экранах с разрешением не более 600 пикселей, установите цвет фона olive */
@media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
Вы задаетесь вопросом, почему мы используем именно 992 пикселя и 600 пикселей? Это то, что мы называем «типичными точками прерывания» для устройств. Вы можете прочитать больше о типичных точках прерывания в нашем Учебник адаптивный веб дизайн.
Медиа запросы для меню
В этом примере мы используем медиа запросы для создания адаптивного меню навигации, которое меняется в дизайне на различных размерах экрана.
Большой экран:
Небольшой экран:
Пример
/* Контейнер навигации */.topnav {
overflow: hidden;
background-color: #333;
}
/* Навигационные ссылки */
.topnav a {
float: left;
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
/* На экранах шириной 600 пикселей или меньше сделайте стек ссылок меню сверху
друг друга, а не рядом друг с другом */
@media screen and (max-width: 600px) {
.topnav a {
float: none;
width: 100%;
}
}
Медиа запросы для столбцов
Общее использование медиа запросов, создать гибкий макет. В этом примере мы создаем макет, который варьируется от четырех, в два столбца и столбцы полной ширины, в зависимости от различных размеров экрана:
Большые экраны:
Средние экраны:
Маленькие экраны:
Пример
/* Создайте четыре одинаковых столбца, которые плавают рядом друг с другом */.column {
float: left;
width: 25%;
}
/* На экранах с разрешением 992px широко или более менее, пойдите от четырех колонн в две колонны */
@media screen and (max-width: 992px) {
.column {
width: 50%;
}
}
/* На экранах, которые 600 пикселей в ширину или меньше, сделать столбцы укладываются друг на друга, а не рядом друг с другом */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
Совет: Более современным способом создания макетов столбцов является использование CSS Flexbox (см. пример ниже). Однако, не поддерживается в Internet Explorer 10 и более ранних версий. Если вам требуется поддержка IE6-10, используйте поплавки (как показано выше).
Чтобы узнать больше о модулях гибких боксах макета модели, прочитайте нашу главу CSS3 Гибкий Бокс.
Чтобы узнать больше об адаптивном веб дизайне, прочитайте нашу Учебник Адаптивный Веб Дизайн .
Пример
/* Контейнер для flexboxes */.row {
display: flex;
flex-wrap: wrap;
}
/* Четыре равные колонки */
.column {
flex: 25%;
padding: 20px;
}
/* На экранах, которые 992px или менее, уятановить от четырех колонн в две колонны */
@media screen and (max-width: 992px) {
.column {
flex: 50%;
}
}
/* На экранах шириной 600 пикселей или менее столбцы укладываются друг на друга, а не рядом друг с другом */
@media screen and (max-width: 600px) {
.row {
flex-direction: column;
}
}
Скрыть элементы медиа запросов
Другим распространенным использованием медиа запросов является скрытие элементов на экранах разного размера:
Я буду прятаться на маленьких экранах.
Пример
/* Если размер экрана 600 пикселей в ширину или меньше, скройте элемент */
@media screen and (max-width: 600px) {
div.example {
display: none;
}
}
Изменение размера шрифта с помощью медиа запросов
Вы также можете использовать медиа запросы для изменения размера шрифта элемента на различных размерах экрана:
Пример
/* Если размер экрана более 600 пикселей в ширину, установите размер шрифта в 80 пикселей */@media screen and (min-width: 600px) {
div.example {
font-size: 80px;
}
}
/* Если размер экрана 600px широкий, или меньше, установите размер шрифта <div> в 30px */
@media screen and (max-width: 600px) {
div.example {
font-size: 30px;
}
}
Гибкая галерея изображений
В этом примере мы используем медиа запросы вместе с flexbox для создания отзывчивой галереи изображений:
Гибкий сайт
В этом примере мы используем медиа запросы вместе с flexbox для создания адаптивного веб сайта, содержащего гибкую панель навигации и гибкий контент.
Ориентация: Книжная/Альбомная
Медиа-запросы также могут быть использованы для изменения формата страницы в зависимости от ориентация браузера.
Вы можете иметь набор свойств CSS, которые будут применяться, когда окно браузера шире, чем его высота, так называемый «Альбомная» ориентация:
Пример
Использовать светло-голубой цвет фона, если альбомный режим:
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
Минимальная ширина и максимальная ширина
Вы также можете использовать значения (max-width: ..)
и (min-width: ..) минимальной ширины и максимальной ширины.
Например, если ширина браузера составляет от 600 до 900px, измените внешний вид элемента <div>:
Пример
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
Использование дополнительного значения: В приведенном ниже примере мы добавим дополнительный запрос к нашему уже существующиму, используя запятую (это будет вести себя как оператор или):
Пример
/* Когда ширина между 600px и 900px ИЛИ выше 1100px измененить внешний вид <div> */
@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}
}
CSS Справочник @media
Для полного обзора всех типов носителей и функций / выражений, пожалуйста, посмотрите на
правило @media в нашей справочнике CSS.
Совет: Чтобы узнать больше об адаптивном веб дизайне (как настроить задание на различные устройства и экраны), используя точки остановки медиа запросов, прочитайте нашу статью Учебник Адаптивный Веб Дизайн.
HTML5 и CSS3 на примерах
HTML (HyperText Markup Language, язык разметки гипертекста) — это прежде всего система вёрстки, которая определяет, как и какие элементы должны располагаться на веб-странице. Информация на сайте, способ её представления и оформления зависят исключительно от разработчика и тех целей, которые он перед собой ставит.
Что же такое стили или CSS (Cascading Style Sheets, каскадные таблицы стилей)? Стилем называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями издавна включают в развитые издательские системы и текстовые редакторы, тем самым позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид. Теперь это доступно и создателям сайта, когда цвет, размеры текста и другие параметры хранятся в определённом месте и легко «прикручиваются» к любому элементу.
Ещё одним преимуществом стилей является то, что они предлагают намного больше возможностей для форматирования, чем обычный HTML. CSS представляет собой мощную систему, расширяющую возможности дизайна и вёрстки веб-страниц.
Любой сайт отображается в специальной программе просмотра, называемой браузером. Таким образом, получается, что разработчики сайта зависят от производителей браузеров, от того, насколько корректно и правильно они воплощают стандарты, разработанные Консорциумом W3. Дело осложняется тем, что популярных браузеров существует несколько, и они порой по-разному интерпретируют указанные стандарты.
Таким образом, при создании сайта необходимо решить следующие задачи — придать веб-странице желаемый внешний вид и обеспечить его корректное отображение в популярных браузерах.
Вёрстка веб-страниц — это не просто знание приёмов и хитростей создания различных эффектов. Это умение предугадывать результат действий с элементами веб-страниц и понимание особенностей различных браузеров, которые могут по-разному отображать сайт. Деятельность разработчика сайта сродни работе шеф-повара, который точно знает, какие ингредиенты и в каком количестве нужно положить, чтобы улучшить вкус готового блюда. В большинстве своем простые, но действенные рецепты, содержащиеся в данном руководстве, помогут вам создавать впечатляющие и работоспособные сайты.
Возможно, многие описанные техники вам и не пригодятся, но их главная задача — показать те возможности и перспективы, которые доступны при создании веб-страниц.
Влад Мержевич
Веб-разработчик, автор нескольких книг, посвящённых созданию сайтов, HTML и CSS. Кандидат технических наук.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 05.09.2017
Редакторы: Влад Мержевич
CSS3 Media Queries — Примеры
Медиа-запросы CSS — другие примеры
Рассмотрим еще несколько примеров использования медиа-запросов.
Медиа-запросы — это популярный метод доставки настраиваемой таблицы стилей на различные устройства. Чтобы продемонстрировать простой пример, мы можем изменить цвет фона для разных устройств:
Пример
/ * Установите цвет фона тела на коричневый * /body {
цвет фона: загар;
}
/ * Вкл.
экраны размером 992px или меньше, установите синий цвет фона * /
@media
экран и (max-width: 992px) {
body {
цвет фона: синий;
}
}
/ * На экранах размером 600 пикселей или меньше
установить
цвет фона в оливковый * /
@media screen и (max-width: 600px) {
корпус {
фоновый цвет: оливковый;
}
}
Вам интересно, почему мы используем именно 992px и 600px? Это то, что мы называем «типичными точками останова» для устройств.Вы можете узнать больше о типичных точках останова в нашем руководстве по адаптивному веб-дизайну.
Медиа-запросы для меню
В этом примере мы используем медиа-запросы для создания адаптивного меню навигации, которое в дизайне на разных размерах экрана.
Пример
/ * Контейнер навигационной панели * /.topnav {
overflow: hidden;
цвет фона: # 333;
}
/ * Ссылки на навигационную панель * /
.topnav a {
float:
осталось;
дисплей: блок;
цвет:
белый;
выравнивание текста: по центру;
отступ: 14 пикселей 16 пикселей;
текстовое оформление: нет;
}
/ * На экранах шириной 600 пикселей или меньше, ссылки меню должны располагаться наверху
друг друга, а не рядом * /
@media screen и (max-width: 600px) {
,topnav a {
float: none;
ширина:
100%;
}
}
Медиа-запросы для столбцов
Обычно медиа-запросы используются для создания гибкого макета. В этом примере мы создаем макет, который варьируется между четырьмя, двумя и столбцами полной ширины, в зависимости от разных размеров экрана:
Пример
/ * Создаем четыре равных столбца, которые располагаются рядом друг с другом * /.column {
плыть налево;
ширина: 25%;
}
/ * На экранах размером 992 пикселей
широкий или менее, идти от
четыре столбца в два столбца * /
@media screen и (max-width: 992px) {
,столбец {
ширина: 50%;
}
}
/ * На экранах, которые
600 пикселей в ширину или меньше, сделайте
столбцы складываются друг на друга, а не рядом * /
@media screen и (max-width: 600px) {
.column {
width:
100%;
}
}
Совет: Более современный способ создания макетов столбцов — использовать CSS Flexbox (см. Пример ниже). Однако он не поддерживается в Internet Explorer 10 и более ранних версиях.Если вам требуется поддержка IE6-10, используйте числа с плавающей запятой (как показано выше).
Чтобы узнать больше о модуле гибкого макета блока, прочтите нашу главу CSS Flexbox.
Чтобы узнать больше об адаптивном веб-дизайне, прочтите наше руководство по адаптивному веб-дизайну.
Пример
/ * Контейнер для флексбоксов * /.row {
display: flex;
flex-wrap: обертка;
}
/ * Создайте четыре равных столбца * /
.column {
flex: 25%;
отступ: 20 пикселей;
}
/ * На экранах шириной 992 пикселя или меньше перейдите от
четыре столбца в два столбца * /
@media screen и (max-width: 992px) {
,колонна {
гибкость: 50%;
}
}
/ * На экранах шириной 600 пикселей или меньше сделайте
столбцы складываются друг на друга, а не рядом * /
@media screen и (max-width: 600 пикселей) {
.row {
flex-direction: столбец;
}
}
Скрыть элементы с помощью медиа-запросов
Еще одно распространенное использование медиа-запросов — скрытие элементов на экранах разных размеров:
Я буду скрываться на маленьких экранах.
Пример
/ * Если размер экрана 600 пикселей или меньше, скрыть элемент * /
@media
экран и (макс. ширина: 600 пикселей) {
div.example {
дисплей: нет;
}
}
Изменение размера шрифта с помощью медиа-запросов
Вы также можете использовать медиа-запросы для изменения размера шрифта элемента на разные размеры экрана:
Пример
/ * Если размер экрана больше 600 пикселей в ширину, установите размер шрифта равным 80 пикселей * /@media screen и (min-width: 600px) {
div.пример {
размер шрифта: 80 пикселей;
}
}
/ * Если размер экрана составляет 600 пикселей или меньше, установите размер шрифта
@media screen и (max-width: 600 пикселей) {
div.example {
размер шрифта: 30 пикселей;
}
}
Попробуй сам »
Гибкая галерея изображений
В этом примере мы используем медиа-запросы вместе с flexbox для создания адаптивной галереи изображений:
Гибкий веб-сайт
В этом примере мы используем медиа-запросы вместе с flexbox для создания адаптивного веб-сайта, содержащего гибкую панель навигации и гибкий контент.
Ориентация: книжная / альбомная
Медиа-запросы также можно использовать для изменения макета страницы в зависимости от ориентация браузера.
У вас может быть набор свойств CSS, который будет только применяется, когда ширина окна браузера превышает его высоту, так называемый «Пейзаж» ориентация:
Пример
Используйте светло-голубой цвет фона, если ориентация в альбомном режиме:
@media только экран и (ориентация:
пейзаж) {
кузов {
цвет фона: светло-голубой;
}
}
Мин. Ширина — макс. Ширина
Вы также можете использовать (max-width: ., ) и (min-width: .. ) , чтобы установить минимальную и максимальную ширину.
Например, если ширина браузера составляет от 600 до 900 пикселей, измените внешний вид элемента
Пример
@media screen и (max-width: 900px) и (min-width: 600px) {
div.example {
размер шрифта: 50 пикселей;
отступ: 50 пикселей;
граница: сплошной черный цвет 8 пикселей;
фон: желтый;
}
}
Использование дополнительного значения: В приведенном ниже примере мы добавляем дополнительный медиа-запрос к нашему уже существующий, используя запятую (это будет работать как оператор ИЛИ):
Пример
/ * Когда ширина составляет от 600 до 900 пикселей ИЛИ больше 1100 пикселей — изменить внешний вид экрана
@media и (max-width: 900px) и (min-width: 600 пикселей), (минимальная ширина: 1100px) {
div.пример {
размер шрифта: 50 пикселей;
отступ: 50 пикселей;
граница: сплошной черный цвет 8 пикселей;
фон: желтый;
}
}
Попробуй сам »
CSS @media Ссылка
Для полного обзора всех типов и функций / выражений медиа, пожалуйста, посмотрите Правило @media в нашем справочнике CSS.
Совет: Чтобы узнать больше об адаптивном веб-дизайне (как настроить таргетинг на разные устройства и экраны), используя точки останова медиа-запросов, прочтите наше руководство по адаптивному веб-дизайну.
,
CSS-анимаций
CSS-анимации
CSS позволяет анимировать элементы HTML без использования JavaScript или Flash!
CSS
В этой главе вы узнаете о следующих свойствах:
-
@keyframes -
название анимации -
продолжительность анимации -
задержка анимации -
количество итераций анимации -
направление анимации -
функция синхронизации анимации -
режим заливки анимации -
анимация
Браузер Поддержка анимации
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
| Свойство | |||||
|---|---|---|---|---|---|
| @keyframes | 43,0 | 10,0 | 16,0 | 9,0 | 30,0 |
| имя-анимации | 43,0 | 10,0 | 16.0 | 9,0 | 30,0 |
| продолжительность анимации | 43,0 | 10,0 | 16,0 | 9,0 | 30,0 |
| задержка анимации | 43,0 | 10,0 | 16,0 | 9,0 | 30,0 |
| количество итераций анимации | 43.0 | 10,0 | 16,0 | 9,0 | 30,0 |
| направление анимации | 43,0 | 10,0 | 16,0 | 9,0 | 30,0 |
| функция синхронизации анимации | 43,0 | 10,0 | 16,0 | 9.0 | 30,0 |
| режим заливки анимации | 43,0 | 10,0 | 16,0 | 9,0 | 30,0 |
| анимация | 43,0 | 10,0 | 16,0 | 9,0 | 30,0 |
Что такое CSS-анимация?
Анимация позволяет элементу постепенно переходить от одного стиля к другому.
Вы можете изменять столько свойств CSS, сколько захотите, сколько угодно раз.
Чтобы использовать анимацию CSS, необходимо сначала указать несколько ключевых кадров для анимация.
Ключевые кадры содержат стили, которые элемент будет иметь в определенное время.
Правило @keyframes
Когда вы указываете стили CSS внутри @keyframes Правило, анимация будет постепенно меняться с текущего стиля на новый стиль
в определенное время.
Чтобы анимация работала, необходимо привязать анимацию к элементу.
В следующем примере «пример» анимации привязывается к элементу
Пример
/ * Код анимации * /Пример @keyframes {
из {background-color: red;}
к {background-color: yellow;}
}
/ * Элемент, к которому применяется анимация * /
div {
width: 100px;
высота: 100 пикселей;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
}
Примечание: Свойство animation-duration определяет, сколько времени должно занять анимация.Если свойство animation-duration не указано,
анимации не будет, потому что
значение по умолчанию — 0 с (0 секунд).
В приведенном выше примере мы указали, когда стиль изменится, используя ключевые слова «от» и «до» (которые представляют 0% (начало) и 100% (завершено)).
Также можно использовать проценты. Используя проценты, вы можете добавить столько стиль меняется по своему усмотрению.
В следующем примере изменяется цвет фона
Пример
/ * Код анимации * /пример @keyframes {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/ * Элемент, к которому применяется анимация * /
div {
ширина: 100 пикселей;
высота: 100 пикселей;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
}
В следующем примере будут изменены и цвет фона, и положение
Пример
/ * Код анимации * /пример @keyframes {
0% {background-color: red; Слева направо: 0px; top: 0px;}
25% {цвет фона: желтый; Слева направо: 200px; top: 0px;}
50% {цвет фона: синий; Слева направо: 200px; top: 200px;}
75% {цвет фона: зеленый; Слева направо: 0px; top: 200px;}
100% {цвет фона: красный; Слева направо: 0px; top: 0px;}
}
/ * Элемент, к которому применяется анимация * /
div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
}
Задержка анимации
Свойство animation-delay определяет задержку для начала анимации.
В следующем примере перед запуском анимации задана 2-секундная задержка:
Пример
div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
задержка анимации: 2 с;
}
Допускаются также отрицательные значения. При использовании отрицательных значений анимация начнется так, как если бы он уже играл в течение N секунд.
В следующем примере анимация начнется так, как если бы она уже была играет за 2 секунды:
Пример
div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
анимация-задержка: -2 с;
}
Установите, сколько раз анимация должна запускаться
Свойство animation-iteration-count определяет, сколько раз анимация должна запускаться.
В следующем примере анимация будет запущена 3 раза до ее остановки:
Пример
div {
width: 100px;
высота: 100 пикселей;
позиция: относительная;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
количество итераций анимации: 3;
}
В следующем примере для анимации используется значение «бесконечный». продолжаться вечно:
Пример
div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
анимация-итеративный-кол:
бесконечный;
}
Анимация запуска в обратном направлении или чередующихся циклах
Свойство animation-direction указывает
следует ли воспроизводить анимацию вперед, назад или поочередно
циклы.
Свойство анимации-направление может иметь следующие значения:
-
normal— Анимация воспроизводится как обычно (Вперед). Это значение по умолчанию -
reverse— Анимация воспроизводится в обратное направление (назад) -
альтернативный— Анимация воспроизводится сначала вперед, затем назад -
альтернативно-обратный— Анимация воспроизводится сначала назад, затем вперед
В следующем примере анимация будет запущена в обратном направлении (назад):
Пример
div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
анимация-направление:
обеспечить регресс;
}
В следующем примере используется значение «альтернативный» для создания анимации. бегать сначала вперед, потом назад:
Пример
div {
ширина: 100 пикселей;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
количество итераций анимации: 2;
анимация-направление:
чередуются;
}
В следующем примере значение «alternate-reverse» используется для создания анимации. сначала бежать назад, затем вперед:
Пример
div {
width: 100px;
высота: 100 пикселей;
положение: относительное;
цвет фона: красный;
имя-анимации: пример;
продолжительность анимации: 4 с;
количество итераций анимации: 2;
анимация-направление:
Альтернативный реверса;
}
Укажите кривую скорости анимации
Свойство функции синхронизации анимации определяет кривую скорости
анимация.
Свойство функции-времени-анимации может иметь следующие значения:
-
легкость— задает анимацию с медленным началом, затем быстрым, а затем медленным завершением (по умолчанию) -
linear— Задает анимацию с одинаковой скоростью от начала до конца -
easy-in— Определяет анимацию с медленным запуском -
easy-out— Определяет анимацию с медленным концом -
easy-in-out— Определяет анимацию с медленным началом и концом -
cubic-bezier (n, n, n, n)— Позволяет вам определять свои собственные значения в кубической функции Безье
В следующем примере показаны некоторые из различных кривых скорости, которые можно использовать:
Пример
# div1 {функция-время-анимации: линейная;}
# div2
{функция-анимации: легкость;}
# div3 {функция-временной-анимации:
easy-in;}
# div4 {функция-тайминга-анимации: easy-out;}
# div5
{анимация-тайминги-функция: легкость входа;}
Укажите режим заливки для анимации
CSS-анимация не влияет на элемент до воспроизведения первого ключевого кадра или после воспроизведения последнего ключевого кадра.Свойство animation-fill-mode может переопределить это поведение.
Свойство animation-fill-mode определяет
стиль для целевого элемента, когда анимация не воспроизводится (до этого
начинается, после окончания или и то, и другое).
Свойство animation-fill-mode может иметь следующие значения:
-
нет— значение по умолчанию. Анимации не будет применить любые стили к элементу до или после выполнения -
вперед— элемент сохранит значения стиля, заданные последним ключевым кадром (зависит от направления анимации и количество итераций анимации) -
назад— элемент получит стиль значения, которые задаются первым ключевым кадром (зависит от направления анимации), и сохранить это в течение периода задержки анимации -
оба— Анимация будет следовать правилам как вперед, так и назад, расширяя свойства анимации в обоих направления
В следующем примере элемент
Пример
div {
width: 100px;
высота: 100 пикселей;
фон: красный;
позиция: относительная;
имя-анимации: пример;
продолжительность анимации: 3 с;
режим заливки анимации: вперед;
}
В следующем примере элемент
Пример
div {
width: 100px;
высота: 100 пикселей;
фон: красный;
позиция: относительная;
имя-анимации: пример;
продолжительность анимации: 3 секунды;
задержка анимации: 2 с;
режим-заливки-анимации: назад;
}
Следующий пример позволяет элементу
Пример
div {
width: 100px;
высота: 100 пикселей;
фон: красный;
положение: относительное;
имя-анимации: пример;
продолжительность анимации: 3 секунды;
задержка анимации: 2 с;
Animation-fill-mode: both;
}
Свойство сокращения анимации
В приведенном ниже примере используются шесть свойств анимации:
Пример
ДИВ
{
имя-анимации: пример;
продолжительность анимации: 5 с;
функция-время-анимация: линейная;
задержка анимации: 2 с;
количество итераций анимации: бесконечно;
направление анимации: альтернативное;
}
Тот же эффект анимации, что и выше, может быть достигнут с помощью сокращения анимация свойство:
Проверьте себя упражнениями!
Свойства анимации CSS
В следующей таблице перечислены правило @keyframes и все свойства анимации CSS:
,
Учебник CSS
CSS — это язык, описывающий стиль HTML-документа.
CSS описывает, как должны отображаться элементы HTML.
Это руководство научит вас CSS от начального до продвинутого.
Начните изучать CSS прямо сейчас »примеров в каждой главе
Это руководство по CSS содержит сотни примеров CSS.
С помощью нашего онлайн-редактора вы можете редактировать CSS и нажимать кнопку, чтобы просмотреть результат.
Пример CSS
тело {цвет фона: голубой;
}
h2
{
цвет белый;
выравнивание текста: центр;
}
п.
{
семейство шрифтов: вердана;
размер шрифта: 20 пикселей;
}
Щелкните кнопку «Попробуйте сами», чтобы увидеть, как это работает.
Примеры CSS
Учитесь на более чем 300 примерах! С помощью нашего редактора вы можете редактировать CSS и нажимать на кнопку, чтобы просмотреть результат.
Перейти к примерам CSS!
Шаблоны CSS
Мы создали для вас несколько адаптивных шаблонов W3.CSS.
Вы можете изменять, сохранять, публиковать и использовать их во всех своих проектах.
бесплатных шаблонов CSS!
Упражнения CSS и тест-викторина
Проверьте свои навыки CSS в W3Schools!
Начать упражнения по CSS!
Начать викторину по CSS!
Ссылки CSS
На W3Schools вы найдете полные ссылки CSS всех свойств и селекторов с синтаксисом, примерами, поддержкой браузера и многим другим.
Экзамен CSS — получите свой диплом!
Интернет-сертификация W3Schools
Идеальное решение для профессионалов, которым необходимо совмещать работу, семью и карьеру.
Уже выдано более 25 000 сертификатов!
Получите сертификат »
Сертификат HTML документирует ваши знания HTML.
Сертификат CSS подтверждает ваши знания в области CSS.
Сертификат JavaScript документирует ваши знания JavaScript и HTML DOM.
Сертификат Python документирует ваши знания Python.
Сертификат jQuery подтверждает ваши знания о jQuery.
Сертификат SQL документирует ваши знания SQL.
Сертификат PHP документирует ваши знания PHP и MySQL.
Сертификат XML документирует ваши знания XML, XML DOM и XSLT.
Сертификат Bootstrap подтверждает ваши знания о среде Bootstrap.
,
61 Примеры анимации CSS
Коллекция бесплатных HTML и CSS анимаций примеров кода. Обновление майской коллекции 2019 года. 22 новинки.
- Библиотеки анимации CSS
- Переходы между страницами CSS
Автор
- Шанс сквайрс
О коде
Закройте жалюзи
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
CSS-анимации с SVG
Переходы и анимация в сочетании с SVG.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Юлия Миоцен
О коде
Чистый CSS Eye
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Stívali Serna
О коде
Колбаса Собака Анимация только CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Рок-н-ролл Полумарафон Анимация
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Letter CSS Анимация
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Брейдон Койер
О коде
Вечерние фонари
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Виан Эстерхайзен
О коде
Проблема трех тел
На основе научно-фантастического романа Лю Цисинь «Проблема трех тел».
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- @keyframers
О коде
2020 SVG Анимация
Дэвид Хоршид и Стивен Шоу празднуют новый год с помощью этой забавной анимации 2020 года с использованием нарисованных вручную контуров SVG, демонстрируя, как упростить анимацию stroke-dasharray / stroke-dashoffset с pathLength = 1 .
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Абубакер Саид
О коде
Эффект раскрытия блока CSS
Измените --td (общая длительность), чтобы увеличить / уменьшить время эффекта.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Хисами Курита
О коде
Только CSS 3D Cube
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Аарон Икер
О коде
Пишущая машинка CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Юсуке Накая
О коде
Только CSS: Motion Blur
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Лассе Диркс
О коде
Анимация со смещением размытия движения
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Хисами Курита
О коде
Только CSS-анимация # 02
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Хисами Курита
О коде
Только анимация Css # 03
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- @keyframers
О коде
Бумажный пируэт
3D анимация летающей страницы только с CSS.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Хисами Курита
О коде
Только CSS-анимация # 01
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Хаякава
О коде
Круг, переходящий в квадрат
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
О коде
Вечный мобильный
Поворотное движение не связано напрямую с движением, поэтому нет очевидных повторов, и анимация более привлекательна.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Кайо Алмейда
О коде
Страница продукта
Страница продукта с анимацией ключевых кадров CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: font-awesome.CSS
О коде
Поддельный переменный шрифт с CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Андрей Шарапов
О коде
SVG Анимация
Некоторые SVG-анимация и ключевые кадры.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Анимированная наклейка
Анимированная наклейка в HTML и CSS.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Вангель Цо
О коде
Анимация рок-руки
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Екатерина Васильева
О коде
h3O — Анимация химической колбы
Химическая колбаSVG слегка анимирована с помощью CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Ахил Сай Рам
О коде
Подводная анимация на чистом CSS
Совместимые браузеры: Chrome, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Ахил Сай Рам
О коде
Свечи (анимация на чистом CSS)
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Aswin Behera
О коде
Кит и луна
Анимация кита и луны на чистом CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Тони Бэник
О коде
Анимация кассеты CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Автор
- Энрике Родригес
О коде
Кофеварка Анимация
Кофеварка с чистой CSS-анимацией.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Арис Акоба
О коде
Анимация солнечного затмения
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
CSS Box Dog Animation
…
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
О коде
CSS Сцена с маяком
Совместимые браузеры: Chrome, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Бит и байты CSS-анимация
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Тамино Мартиниус
Сделано с
- HTML / CSS (PostCSS) / JavaScript (TypeScript)
О коде
Анимация точечного меню
Четыре различных анимации меню для переключения кнопок меню между точками, крестиком и значком «назад».
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
О коде
Анимация петли
Анимация прокрутки лупы.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: font-awesome.css
Автор
- Юлия Музафарова
О коде
Чистая CSS Анимация усатая няня
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
О коде
Справочник по анимации
Анимация загрузки справочника.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
О коде
Книги Анимация наведения
Хорошо анимация при наведении для обложки книги.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Сделано с
- HTML (Мопс) / CSS (SCSS) / JavaScript
О коде
Подключенная анимация
Простая подключенная анимация для модальных окон.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Автор
- Ашиш Бардхан
О коде
Адаптивная и анимированная ветряная мельница
Windmill (Pug + SCSS) — отзывчивый и анимированный.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
О коде
Анимация маски CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
отзывчивый: да
Зависимости: —
Сделано с
- HTML (Мопс) / CSS (SCSS) / JavaScript
О коде
CSS-анимация: время суток
Эксперимент с CSS-анимацией.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: simple-line-icons.css, jquery.js
Сделано с
- HTML (Мопс) / CSS (SCSS) / JavaScript
О коде
CSS-анимация: в помещении или на улице?
Недавно был задействован в проекте, где мы должны были делать анимацию. Мы использовали для этого After Effects> JSON> магию плагина, но мне было интересно, могу ли я воспроизвести тот же эффект с помощью CSS.- Оливия
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: simple-line-icons.css, jquery.js
Автор
- Дэнни Джорис
О коде
Анимация границ только CSS
Анимация границы только для CSS при наведении курсора. Для работы нужен прочный фон.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Автор
- Джейми Коултер
О коде
Чистый CSS Saturn Hula Hooping
Titan часы хула-хуп Saturn! Преобразование этого gif в чистый CSS: https://dribbble.com/shots/4252236-Saturn-Hula-Hooping
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Джерри Джонс
Сделано с
- HTML (Haml) / CSS (SCSS) / JavaScript (Babel)
О коде
Анимация привлечения внимания
Иногда вам нужно привлечь внимание к элементу на своей странице.Некоторые из них неуловимы. Некоторые из них — нет.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Брайан Хаферкамп
Сделано с
- HTML (мопс) / CSS (Sass) / JavaScript
О коде
Сетка перспективы с анимацией
В этой галерее используется CSS Grid Layout и перспектива CSS3, чтобы создать что-то немного уникальное.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: jquery.js
Автор
- Юлия Музафарова
О коде
Губка из чистого CSS
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Энтони Фесси
Сделано с
- HTML / CSS (SCSS) / JavaScript
О коде
Анимация открытия CSS
css-анимация , которая показывает текст и изображение с задержкой / направлением.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: jquery.js
Автор
- Джордж Гастингс
О коде
Анимированное обратное свечение
Псевдоэлемент, анимация и размытие градиента фона.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Автор
- Николай Таланов
Сделано с
- HTML / CSS (SCSS) / JavaScript
О коде
Классный макет со сложной цепочкой анимаций
На основании этого — https: // dribbble.ком / выстрелов / 2802024-Satellite-Сайт-прототип. Основанная на добавлении всего 2 классов с JS (и простого наведения), эта демонстрация включает в себя множество классных цепных анимаций , в сочетании с хорошей производительностью и своего рода простым в обслуживании SCSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Владимир Гашенко
О коде
Парк развлечений Flat Design с анимацией CSS
Плоский дизайн Парк развлечений, анимированный с помощью чистого CSS3.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Автор
- Тед Макдональд
О коде
CSS и SVG Анимация волн
Эта версия CSS3 с аппаратным ускорением, проста и намного более производительна.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Michiel Bijl
О коде
Анимация смахивания карты
Карточка смахивающая анимация Material Design.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Автор
- Michiel Bijl
О коде
Дизайн анимационных материалов CSS
HTML и CSS Material Design с анимацией.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Джони Тритхолл
О коде
Анимированные иконки корзины покупок
Просто экспериментирую с некоторой SVG-анимацией и интерактивностью для «Магазин фальшивых фруктов».
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Марк Боули
О коде
Анимированные пузыри на чистом CSS
Анимированные пузыри , использующие только HTML и CSS.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Адриан Пейн
О коде
CSS Анимация пламени
Анимированное пламя с использованием только CSS3-анимации и box-shadow .Хотел посмотреть, смогу ли я разжечь огонь, используя только CSS — пламя включено!
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
Автор
- Дамиан Дригель
О коде
Подпись Анимация
Чистый CSS, легкая анимация подписи .Без анимации GIF, только легкая (20 КБ) последовательность PNG, анимированная с использованием CSS3. Кнопка анимации «Воспроизвести» без JS, чистый CSS. Изменить цвет знака при наведении.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Зависимости: —
Автор
- Хаким Эль-Хаттаб
О коде
Облачная спираль
Облачная спиральная CSS-анимация.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Зависимости: —
,