Css фоны: Фон в CSS | Уроки

33 Примеры анимированных фонов [с использованием чистого CSS]

Вы можете использовать фоновую анимацию CSS, чтобы помочь вашему сайту выделиться из толпы, подчеркнуть ваш бренд или просто выглядеть потрясающе. А поскольку CSS стал настолько мощным, вы можете создавать великолепные фоновые эффекты CSS без единой строки кода JavaScript . Теперь вы даже можете создать видео фон только с помощью CSS! Кто бы сказал нам это 15 лет назад, а?

Итак, вот 20 великолепных анимированных фонов вы можете использовать в своих проектах или черпать вдохновение! Идеально подходит для сайтов-слайдеров.

1) Анимированные цвета фона в CSS

См. перо на КодПене.

Начнем с основ. Простое затухание цвета — вы можете использовать @keyframes для затухания фона между любым количеством цветов, которое вам нужно, и использовать проценты, чтобы определить, как долго анимация будет оставаться на этом цвете перед изменением.

Простота, легкость реализации и эффективность.

2) Градиент анимированного фона CSS

См. перо на КодПене.

Теперь давайте сделаем еще один шаг вперед — вместо того, чтобы один цвет плавно переходил в другой, вы можете добавить дополнительный штрих с помощью градиента, приятно перемещающегося вперед и назад по экрану. Это один из самых простых способов сделать движущийся фон

в CSS .

3) Плавающие квадраты

См. перо на КодПене.

Пришло время добавить несколько объектов! Вот классный движущийся фон (только CSS, хотите верьте, хотите нет) от TokyoWeb. Эти полупрозрачные вращающиеся квадраты всплывают на экране.

Это выглядит круто как есть, но самое интересное, что вы можете экспериментировать с кодом, чтобы создавать разные цвета, формы, направления и скорости. Надень свою творческую шляпу и посмотри, что у тебя получится.

4) SVG-анимация (HTML-анимированный фон)

См. перо на КодПене.

Если вы не знакомы с SVG, эта анимация покажется вам волшебством. Там нет ни одной строчки CSS или JS. Это делается исключительно с помощью HTML. Чистый анимированный фон HTML .

Это одна из самых крутых фоновых HTML-анимаций, которые я когда-либо видел. Это дает мне те же ощущения, что и некоторые старые заставки для Mac OS X, с этими сложными градиентами, которые никогда не стареют и придают суперсовременный вид.

5) Фон с анимированными движущимися квадратами

См. перо на КодПене.

Если вы ищете утонченную, но современную анимацию, этот анимированный фон из квадратов может стать идеальным кандидатом для вашей страницы.

Эта анимация полностью создана на основе CSS, и этот эффект можно легко применить практически к любому веб-сайту, поскольку он не отвлекает. Вы можете применить этот анимированный фон ко всему веб-сайту или к определенным его разделам.

6) Базовая анимация пейзажного фона

См. перо на КодПене.

Этот пример демонстрирует одну из самых простых анимаций фона, анимируя положение изображения слева направо.

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

7) Анимация фона сетки

См. перо на КодПене.

Эта анимация сделана не только с помощью чистого CSS, но и с помощью чистого HTML!

Он использует функцию ключевых кадров CSS для анимации положения фона сетки фона. Эффект был применен к телу страницы и может быть применен к любому другому элементу.

8) Анимированный фон рисунков

См. перо на КодПене.

Эта анимация придает вашему сайту модный вид. Он анимирует некоторые основные фигуры вверх и вниз с некоторыми эффектами смягчения, придавая вашему фону новый оттенок.

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

9) Анимация фона текста

См. перо на КодПене.

Хотя на первый взгляд кажется, что это текстовая анимация, технически эта анимация является фоновой анимацией внутри текстового элемента.

Создает очень интересный эффект и может быть довольно красивым визуальным эффектом при выборе правильного фона и толстого шрифта.

10) Фоновая анимация капли

См. перо на КодПене.

Да, можно создать анимацию BLOB-объектов без использования JavaScript, и вот пример, подтверждающий это.

Используя свойство CSS border-radius , мы можем создать элемент blob, затем мы можем вращать его, как обычно, используя свойство CSS transform

. Теперь вы можете добавлять анимированные капли на свои веб-сайты!

11) Круглый фон

См. перо на КодПене.

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

Анимация очень простая, но эффект, который она создает, выглядит так здорово! Эффект достигается за счет анимации каждого отдельного круга с различным эффектом импульса с использованием свойства ключевого кадра CSS .

12) Анимация частиц

См. перо на КодПене.

Вот еще один пример, показывающий, как анимировать светящиеся частицы с помощью элементов CSS и HTML.

Вы можете применить этот эффект в качестве фона, хотя на самом деле это не фоновая анимация.

См. перо на КодПене.

Другим примером очень простой анимации является то, что при правильном использовании она может придать вашему сайту совершенно новый вид.

Он использует базовую вертикальную анимацию, имитирующую прокрутку размытого веб-сайта в фоновом режиме. Он использует ключевые кадры CSS и преобразования для выполнения движения фонового изображения.

14) Фоновая анимация волны

См. перо на КодПене.

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

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

15) Фоновые эффекты Fireworks CSS — версия 1

См. перо на КодПене.

Этот чисто CSS анимированный эффект фейерверка будет отлично смотреться сам по себе (может быть классно на странице «Поздравления» или «Успех» или что-то в этом роде), но может выглядеть еще круче с изображением переднего плана, например, с городским пейзажем.

16) Фоновые эффекты Fireworks CSS — версия 2

См. перо на КодПене.

Вот еще один подход к фейерверку. Эта версия имеет другое ощущение — частицы имеют более естественное движение, почти как если бы они были гравитационными.

17) Заполнение фонового эффекта CSS

См. перо на КодПене.

Этот движущийся фон (с использованием только CSS) немного напоминает движение через бассейн с шарами на скорости деформации. Мне это нравится.

18) Размытые линии

См. перо на КодПене.

Если бы Робин Тик создавал фоновые эффекты CSS, то это могло бы быть тем, что он придумал. Он привлекает внимание, но не отвлекает — обратите внимание, что даже с таким довольно светлым шрифтом текст по-прежнему легко читается.

19) Ретро сетка Анимированный фон CSS

См. перо на КодПене.

Вы поклонник стиля ретро 80-х? Вы создаете сайт для исполнителя synthwave? Или вы просто не можете отпустить прошлое? Если ответ на любой из этих вопросов «Да», то вам понравится эта превосходная ретро-анимация сетки в стиле Трон!

Вы можете изменить цвета с помощью переменных $computationalFogBot , задающих фон, и $nodeStreak

, задающих цвет полос.

Еще один пример этой темы:

. См. перо на КодПене.

Знаете ли вы, что вы также можете создавать оповещения на чистом CSS?

20) Анимированный фон с эффектом снегопада (только CSS)

См. перо на КодПене.

Я не знаю, праздничный ли сезон, когда вы это читаете. Для меня это не имеет значения. Я надену шляпу Санты и посмотрю Эльфа в любое время года. Если вы чувствуете то же самое, то вот вам хороший эффект снегопада — с настоящими снежинками!

21) Параллаксный фон снегопада

См. перо на КодПене.

Ты что, хочешь еще больше снега? Хорошо… Как насчет этого? Это имеет гораздо более сильный снегопад и очень хороший эффект параллакса в придачу.

22) Бесконечные треугольники

См. перо на КодПене.

Этот шутит с вашим мозгом. Треугольники движутся вверх или вниз? Расширение или сокращение? Никто не знает — это весело.

23) Плавающее сердце Бесконечная анимация

См. перо на КодПене.

Подобно треугольникам выше, вот еще одна фоновая анимация CSS, которая попадает прямо в категорию «триповых». С этим вы не только получаете крутую фоновую анимацию, но и одновременно открываете свои чакры. Бонус.

24) Светлячки CSS

См. перо на КодПене.

Эти маленькие светлячки вызывают чувство удивления и интриги. Эффект выглядит круто на фоне леса, но хорошо работает и на простом цвете:

См. перо на КодПене.

25) Гипно-Квадраты

См. перо на КодПене.

Эти квадраты Hypno милые и довольно уникальные. Однако не смотрите на них слишком долго — они могут передавать подсознательные сообщения вашему подсознанию.

26) Анимация размытых пузырей

См. перо на КодПене.

Эти размытые/слегка не в фокусе пузыри появляются, казалось бы, случайно, приносят радость и счастье на короткое время, а затем медленно, но неизбежно исчезают. Что, кстати, также является точным описанием моей личной жизни, но об этом в другой раз.

27) Анимированная лавовая лампа CSS

См. перо на КодПене.

Итак, вы уже видели несколько классных примеров анимации фона CSS, которые вы можете легко подключить и использовать. Теперь давайте рассмотрим, что возможно, когда вы находитесь на вершине своей игры — начнем с этой лавовой лампы только с CSS от Janos Szudi!

28) Анимированный фон с эффектом матрицы (CSS)

См. перо на КодПене.

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

29) Маяк ночью Фоновая анимация CSS

См. перо на КодПене.

Как насчет этой удивительной работы Кэмерона Фитцуильяма! Теперь этот использует JS… но… JS просто управляет тем, как изображение реагирует на движение мыши. Вы можете удалить все JS и анимации на волне, и свет маяка все равно будет работать. Так что я разрешаю это.

См. перо на КодПене.

Это очень милая CSS-анимация, созданная замечательной Линн Фишер. Но проверьте поле HTML в редакторе. Нет, не настраивайте свой монитор, вы правильно видите — она ​​сделала это с помощью одиночный раздел . Чистейшего CSS не бывает! Или это…

31) Анимация диагональных линий

См. перо на КодПене.

Эта анимация не потребует от вас написания ни одной строчки HTML, все делается только с помощью CSS.

Линии на фоне создаются с помощью свойства Repeating-Linear-Gradient , а затем анимируются, как обычно, с помощью анимации и ключевых кадров .

32) Снежный фон

См. перо на КодПене.

Идеально подходит для рождественских праздников, чтобы придать вашей странице новый дизайн.

Эта анимация использует анимацию параллакса для анимации различных слоев снежков с разной скоростью. Таким образом создается более реалистичный эффект перспективы в сочетании с размытым эффектом снежков, которые находятся дальше.

33) Нет анимации Div Car CSS

См. перо на КодПене.

Здесь abxlfazl khxrshidi пошел еще дальше и создал этот анимированный CSS фон автомобиля (который, судя по всему, скоро остановят!), без div вообще !

Проверьте сами, поле HTML пусто, если не считать комментариев. Они сделали это, применив весь свой CSS к элементу html .

Удивительно, что можно придумать, когда овладеешь своим ремеслом! Но одна из замечательных особенностей интерфейсной веб-разработки заключается в том, что мы можем использовать фрагменты кода, библиотеки и CSS-фреймворки, созданные людьми, намного более квалифицированными, чем мы. Таким образом, нам не нужно ждать, пока мы достигнем мастерства, чтобы начать делать действительно классные вещи.

Одной из таких библиотек, которую я рекомендую вам проверить, является fullPage. js.

Ваш браузер не поддерживает видео тег.

fullPage помогает создавать полностраничные сайты, где вы разбиваете свою веб-страницу на фрагменты, каждый из которых занимает полный размер браузера пользователя. Вы знаете тип — при прокрутке вы переходите на следующую страницу, а не прокручиваете немного вниз. Еще не понял, о чем я? Просто посмотрите эти 20 примеров одностраничных сайтов, и ваши сомнения исчезнут.

С помощью fullPage вы сможете интегрировать различные фоновые CSS-анимации, которые мы только что рассмотрели, возможно, размещая разные анимации на каждой странице. Если это похоже на то, что может хорошо работать в одном из ваших проектов, посмотрите несколько примеров того, что он может сделать здесь: примеры fullPage.js.

• Потрясающие анимации прокрутки текста с помощью CSS и JS
• Все типы анимации текста CSS
• Удивительные анимированные слайдеры для вдохновения и с примерами
• Как создать анимацию CSS при прокрутке [с примерами]
• Крутая анимация CSS для добавления на ваш сайт

Об авторе:

Уоррен Дэвис — фронтенд-разработчик из Великобритании.
Больше информации от него можно найти на https://warrendavies.net

сообщить об этом объявлении

Самый быстрый способ установить фон CSS | by Матеуш Хадрысь | Стартап

Замените 8 свойств и 8 строк CSS всего на 1

В веб-разработке важна скорость. Особенно при прототипировании.

Если вы не ниндзя, печатающий со скоростью 150 слов в минуту, добавление фона может занять много времени. И давайте будем честными…

Кто хочет набрать background-*: value; 8 раз ?

Много печатать и много места. Мы можем использовать сокращение фона, чтобы превратить все это в одну строку:

Аккуратно, да?

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

Если вы не знакомы со всеми вышеперечисленными свойствами, пожалуйста, найдите минутку, чтобы прочитать мое краткое введение в свойства фона, прежде чем читать эту статью. Это поможет вам понять, что происходит.

Возможно, сейчас вы думаете про себя:

Ладно, хорошо, что они на одной линии. Но нужно ли мне все еще записывать все эти значения?

Нет. В отличие от сокращения шрифта, все свойства в сокращении фона являются необязательными.

Стилизация полного текста с помощью одной строки CSS

Как преодолеть страх перед стенографией шрифта, заменив 6 строк CSS на 1

medium.com

Однако будьте осторожны.

Если вы не укажете значение для одного из свойств, будет использоваться его значение по умолчанию. Даже если вы установили это свойство ранее.

Порядок свойств не имеет значения. За некоторыми небольшими исключениями:

Положение и размер

background-size может идти сразу после background-position , и они должны быть разделены косой чертой ( / ).

Это означает, что вы не можете установить background-size без background-position , используя это сокращение.

Есть два способа обойти это:

1. Используйте значение по умолчанию background-position , которое равно: 0% 0% . Например, 0% 0%/50% установит размер фона 9.От 0016 до 50% и оставить background-position без изменений.
2. Установите background-size отдельно после сокращения фона. Вот так:

ВАЖНО: Если вы попытаетесь установить background-size в сокращении, используя одно из его ключевых слов ( cover или содержат ) без свойства background-position background весь фон будет считаться недействительным и игнорироваться.

📦 Origin & Clip

Because the values ​​of background-origin and background-clip heavily overlap…

• border-box
• padding-box
• content-box
• текст — Это исключение. Он доступен только для background-clip .

…установка их с помощью сокращенной записи работает немного по-другому.

Если вы включите только одно из значений поля, оно будет использоваться для обоих background-origin и background-clip .

Если вы включите два, первый будет использоваться для background-origin , а второй — для background-clip .

Если вы ничего не используете, оба свойства сохранят свои значения по умолчанию.

Вот почему я обозначил их на изображениях как box .

ПРИМЕЧАНИЕ. Насколько я знаю, background-clip значение text не поддерживается фоновым сокращением. Поэтому, если вы хотите создать градиентный текст, вам нужно установить background-clip отдельно.

Синтаксис с несколькими значениями

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

background-size — Если указано два значения, первое задает ширину изображения, а второе его высоту.

background-repeat — если указано два значения, первое задает поведение повторения для горизонтальной оси (x), а второе — для вертикальной оси (y).

background-position — если указано два значения, первое определяет положение изображения по горизонтали, а второе — по вертикали.

Сокращение фон позволяет вам установить цвет или изображение в качестве фона. Вы даже можете установить оба.

Стоп, зачем мне оба?

Установка запасного варианта background-color может быть полезна во многих случаях:

• Если URL-адрес изображения не работает или изображение загружается долго, цвет фона может быть хорошим заполнителем.
• Если изображение содержит прозрачность, цвет фона будет виден под ним.