Анимированный фон веб-страницы на чистых HTML и CSS
Домой Обучение Анимированный фон веб-страницы на чистых HTML и CSS
Хочешь знать больше про веб?
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Подписаться
×
Перевод статьи «Amazing Pure HTML and CSS background animations».
Анимации — это круто, правда? Они добавляют изюминку на сайт и позволяют ему выделиться на фоне конкурентов. Но бывает, что вы решили создать сайт исключительно на HTML и CSS, и это несколько ограничивает полет вашей фантазии. И совершенно зря! Даже если у вас в наборе только эти два инструмента, вы все равно можете достигнуть потрясающих визуальных эффектов. В этой статье вы найдете несколько идей, от которых сможете отталкиваться в дальнейшем.
Диагональный градиент
Написать такой код легко, а эффект получается очень интересный.
Скольжение диагоналей
See the Pen Sliding Diagonals Background Effect by Chris Smith (@chris22smith) on CodePen.
Предыдущий эффект был очень ненавязчивым, а этот гарантированно привлекает внимание.
Анимированный фон
Обратите внимание, насколько прост сам бэкграунд и насколько меняется его восприятие благодаря анимации.
Бесконечный паттерн
See the Pen
Pattern Animation (Infinite) by Adam Abundis (@adamabundis)
on CodePen.
Отдельное спасибо @keyframes за бесконечную прокрутку!
Прекрасный анимированный бэкграунд
See the Pen Awesome Animated background by beshoy ekram (@beshoooo) on CodePen.
Просто задержитесь на мгновение и насладитесь тем, насколько привлекательна эта анимация. Такое приятное смешение цветов, а между тем оно совершенно не отвлекает внимание от названия на переднем плане.
Анимированный «лесной» фон
See the Pen CSS Multiple Background Image Parallax Animation by carpe numidium (@carpenumidium) on CodePen.
Плавающие квадраты
See the Pen
Pure Css Animated Background by Mohammad Abdul Mohaiman (@mohaiman)
on CodePen.
Снова диагональные линии
See the Pen Sépion CSS background animation 2 by Sépion (@Sepion) on CodePen.
Весьма ненавязчиво!
Плывущие облака
See the Pen Floating Cloud Background by Shaw (@shshaw) on CodePen.
Да, в названии заявлено, что все на чистом СSS, но когда я увидел этот фон, не смог не добавить его в коллекцию, несмотря на то, что здесь использован CSS(Less).
Надеюсь, эти идеи вдохновят вас на создание собственных интересных эффектов. Поиграйтесь с приведенными CodePen-ми: возможно, таким образом и у вас родится замечательная идея.
- ТЕГИ
- frontend
- верстка
Следующая статья4 полезных инструмента для веб-разработки, нечасто попадающих в списки «самых-самых»
Редакция techrocks.
ru
techrocks.ru — качественный контент, созданный инженерами для инженеров
Красивые анимированные фоны (код) | 🎅MnogoBlog
Здравствуйте, представляю Вам подборку кода, создающего красивые анимрованные фоновые изображения с потрясающими эффектами.
1. Анимированные фоны на CSS:
Скользящие анимированные фоновые изображения на CSS:
1.1. “codepen.io/tylersticka/pen/mewaqW”
Отличный эффект, когда передние изображение имеют более быструю скорость относительно изображений, расположенных на заднем фоне.
1.2. “codepen.io/lyphanghr/pen/RZKmgy”
Красивые сдигающиеся и раздвигающиеся наклонные панели.
1.3. “codepen.io/bobbykorec/pen/GpYpKY”
В данном фоне присутствует эффект параллакса + эффект прокрутки = потрясющее фоновое изображение.
Про красивые многослойные CSS фоны можете прочитать в моей статье здесь – “https://mnogoblog.
ru/mnogoslojnye-css-fony-kod”.
1.4. “codepen.io/andreyshipalov/pen/YNXNPy”
Эффект бегущей строки, только созданный из изображения.
1.5. “codepen.io/jackrugile/pen/Apfyn”
Ещё одно анимированное фоновое изображение с красивыми горами и холмами.
2. Анимированные фоны с использованием JavaScript:
Вот несколько фоновых анимации, которые создаются с использованием HTML, CSS и JavaScript. Мы видим, что JavaScript вывел анимацию на совершенно новый уровень. Анимации стали динамичными и могут управляться с помощью пользовательского кода.
2.1. “codepen.io/msurguy/pen/sbIio”
Triangle Pattern Generator – это инструмент анимации для создания красивых фонов и обоев. Вы можете управлять светом и цветом фона. Вы также можете контролировать размер и срезы треугольников. Этот генератор поддерживает экспорт в форматы PNG и SVG. А SVG является векторной графикой, поэтому вы можете увеличить шаблон до любого размера, который вы хотите.
2.2. “codepen.io/wouwi/pen/Apvaq”
На данном фоне фигуры изменяются по размерам, а вращающиеся огни добавляют восхитительные эффекты к анимации. Вы можете играть с кодом самостоятельно, чтобы изменить эффекты и переходы срезов.
2.3. “codepen.io/dandenney/pen/tKsdj”
Эта фоновая анимация также имеет срезы с изменяющимися размерами и огнями. Но огни имеют разные движения и направления в отличии от предыдущего анимированного фона.
2.4. “codepen.io/jhnsnc/pen/Mprdaa”
Здесь происходит переход цветов и градиентов над треугольными формами. Каждые несколько секунд данный анимационный фон тонко изменяет градиенты освещения.
3. Анимированные фоны на Canvas:
3.1. “codepen.io/jacquelinclem/pen/udnwI”
Красивая анимация цвета точек, изменяющегося положения линий и прозрачности. Анимация состоит из HTML, CSS и JavaScript кода.
3.
2. “codepen.io/pawelqcm/pen/oxPYox”
Физические значения, такие как: высота, ширина, цвет и чувствительность можно регулировать. Достаточно легко встроить на свой сайт.
3.3. “codepen.io/VincentGarreau/pen/pnlso”
Завораживающая комбинация цвета, движущихся точек и линий делает эту анимацию красивой и оригинальной.
3.4. “codepen.io/acauamontiel/pen/mJdnw”
Анимация из тематики галактики и звёзд.
3.5. “codepen.io/Munkkeli/pen/PqWBdP”
Это самый простой из всех представленных фонов. Он просто имеет несколько движущихся частиц. Изменить можно только цвета фона.
3.6. “codepen.io/jackrugile/pen/acAgx”
Красивый фейерверк.
3.7. “codepen.io/dudleystorey/pen/NbNjjX”
3.8. “codepen.io/seanseansean/pen/reQGoQ”
3.9. “codepen.io/linrock/pen/Amdhr”
Падающие конфетти.
3.10. “codepen.io/akm2/pen/Risa”
На этом всё! Красивых Вам сайтов!
6 лучших генераторов фона CSS
Фоны необходимы для любой веб-страницы, и они могут улучшить или испортить дизайн вашего сайта. В Интернете есть тысячи генераторов, которые помогут вам создать эстетически привлекательный фон для использования в дизайне вашего веб-сайта, но некоторые генераторы могут быть слишком сложными, поэтому полезно изучить, какой генератор использовать на основе вашего предпочтительного дизайна.
Использование CSS для добавления шаблонов и эффектов к фону вашей веб-страницы может помочь придать вашему сайту изюминку. Эта статья предоставит вам список лучших генераторов фона и шаблонов, используемых в CSS, которые помогут вам создать что-то захватывающее в вашем веб-дизайне.
В этой статье мы рассмотрим:
- Шаблоны героев
- Градиент CSS
- MagicPattern
- Фоны SVG
- Хайкей
- БГДжар
Не теряя больше времени, давайте приступим к делу.
Шаблоны героев
Hero Patterns — идеальный инструмент для дизайнеров, которым нужен быстрый и легкий доступ к бесконечному количеству красивых узоров. Генератор имеет широкий спектр узоров из природы, животных и многого другого, которые обязательно подойдут к любому стилю дизайна. Все эти готовые шаблоны можно настроить с помощью различных цветовых схем и прозрачности по вашему выбору.
Hero Patterns бесплатен и прост в использовании, что делает его идеальным ресурсом как для профессиональных дизайнеров, так и для начинающих.
Чтобы использовать шаблоны героев, вам просто нужно выбрать шаблон, отредактировать цвета и непрозрачность по своему усмотрению, а затем применить сгенерированный код к вашему CSS. Например, на изображении ниже показано, как выбрать два цвета для макета вашего сайта:
Будет сгенерирован следующий код CSS, и если этот код применить к контейнеру, вы получите следующее:
А это пример CodePen:
См.
Фон паттернов Pen
Hero от fimber elems (@Fimbosky1)
Как видите, шаблон повторяется по всему контейнеру, к которому он применяется. Довольно аккуратно, правда?
Градиент CSS
CSS Gradient — отличный сайт для создания красивых линейных и радиальных градиентов. Одна из лучших особенностей CSS Gradient — это его пользовательский интерфейс, который интуитивно понятен и легко предлагает все необходимое для создания следующего великолепного фона. От предустановок градиента до линейного и радиального переключения и настройки направлений градиента и даже добавления дополнительных точек взрыва — пользовательский интерфейс CSS Gradient является первоклассным.
В отличие от Hero Patterns, CSS Gradient не имеет узорчатого фона шаблона. Тем не менее, он компенсирует это, предоставляя почти бесконечное количество предварительно разработанных образцов градиента, а также позволяя вам создавать свои собственные градиенты. Градиенты из CSS-градиентов также можно применять к тексту, а не только к фону.
CSS Gradient также предоставляет специальный блог, в котором объясняются все аспекты инструмента, что позволяет дизайнерам полностью понять его перед использованием.
Использовать CSS Gradient так же просто, как скопировать код с сайта и добавить его в свой контейнер. Если вы перейдете в раздел образцов, вы увидите линейные градиентные фоны, подобные этому:
Все, что вам нужно сделать, это нажать кнопку копирования и вставить образец в любой элемент div или текст, который вы хотите.
Если мы хотим использовать образец «Кровавая мимоза» в качестве фона в примере, который мы использовали ранее, это будет выглядеть так:
MagicPattern
MagicPattern, безусловно, лучший генератор фона, который сейчас работает. Для сравнения, он имеет те же функции, что и CSS Gradient и Hero Patterns, но предлагает больше возможностей, таких как:
- Генератор BLOB-объектов
- Генератор фона Doodle
- Бесплатный генератор шума
- Генератор сообщений в социальных сетях
Генератор MagicPattern — отличный инструмент, помогающий создавать узоры с использованием различных параметров.
Шаблоны генерируются на основе размера, ориентации, цвета и типа шаблона, поэтому существует множество вариантов желаемого результата.
MagicPattern также прост в использовании — все, что вам нужно сделать, это щелкнуть нужный тип узора и выбрать цветовой градиент, нажав одну из предустановленных кнопок или введя определенные значения RGB. Шаблоны генерируются мгновенно, поэтому вы можете видеть их в своем дизайне.
Более 200 000 разработчиков используют LogRocket для улучшения цифрового взаимодействия
Подробнее →
С помощью MagicPattern вы можете загрузить свой дизайн в виде изображения в формате PNG, SVG или JPG или скопировать код и добавить его в свой файл CSS. Если вы выберете формат изображения, вы сможете выбрать размер, в котором вы хотите загрузить изображение. Довольно приятная вещь, если вы спросите меня:
Единственным недостатком MagicPattern является то, что он платный. У него есть бесплатная опция, которая предлагает большую ценность, но у нее ограниченное количество шаблонов или вариантов выбора.
Подписка стоит от 10 до 20 долларов в месяц, так что это отличный вариант, если вы можете себе это позволить.
Фоны SVG
SVG Backgrounds — отличный способ добавить больше деталей и утонченности вашему веб-дизайну. Формат файла SVG основан на векторах, поэтому ваши проекты будут четкими, даже если вы увеличите масштаб. Кроме того, формы можно изменить, изменив значения на сайте, что может сэкономить время и значительно упростить процесс проектирования.
Всего за несколько кликов этот бесплатный CSS-генератор фонов SVG может сгенерировать ваш фон с формой по вашему выбору. И он может настроить все, от цветов, градиентов и, в некоторых случаях, до положения узоров:
SVG Backgrounds — отличный генератор, но он уступает с точки зрения ценности по сравнению с тремя другими генераторами в этом списке, учитывая ограниченный набор опций, из которых могут выбирать пользователи. Тем не менее, их дизайн фона довольно уникален, и они являются одним из лучших генераторов CSS.
Хайкей
Haikei — это бесплатный онлайн-инструмент, который поможет вам создать простые, но красивые шаблоны для вашего сайта. Процесс очень прост — все, что вам нужно сделать, это ввести желаемый шаблон и выбрать цветовую схему. Затем генератор создаст изображение с уже встроенным в него шаблоном:
.Если есть какие-либо дефекты или дефекты, их можно исправить, изменив плотность рисунка или добавив больше цветов. Это может быть не для тех, кто хочет чего-то более персонализированного, потому что нет возможности добавить персонализацию с помощью текста или изображений.
Кроме того, Haikei позволяет выбрать только два цвета за раз, поэтому, если вы хотите использовать несколько разных цветов, это может не сработать.
Наконец, Haikei — это генератор фонового изображения, поэтому вы можете загрузить только сгенерированное изображение (у него нет опции кода).
БГДжар
Генератор CSS BGJar — это инструмент, позволяющий создавать фоновые изображения и узоры с использованием различных типов ввода.
Инструмент предлагает выбор предварительно разработанных фонов, каждый из которых имеет разные цветовые схемы, и использует функции инструмента для создания собственного уникального фона:
Для начала выберите тип шаблона и при необходимости введите некоторые настройки. Затем генератор автоматически сгенерирует ваш новый шаблон, чтобы вы могли загрузить его в различных форматах (включая код CSS!). Вы можете добавлять дополнительные эффекты, такие как линейные градиенты, и редактировать их диапазон и углы.
Ассортимент паттерновBGJar не так велик, как у паттернов героев, но, на мой взгляд, они красивее. Однако это может быть просто случай личных предпочтений!
Заключение
Генераторы CSS, перечисленные в этой статье, являются лучшими генераторами фона в CSS и удовлетворят все ваши потребности в фоне, независимо от вашего вкуса. Они могут помочь вам стать лучшим разработчиком, сэкономив вам много времени в процессе проектирования.
Я надеюсь, что эта статья станет вашей шпаргалкой по генераторам фона CSS.
Из шести генераторов, упомянутых выше, мой личный фаворит — Magic Patterns по очевидным причинам. Он предлагает большую ценность, чем другие генераторы фона, и может использоваться для всего, что могут другие генераторы.
Ваш интерфейс загружает ЦП ваших пользователей?
Поскольку веб-интерфейсы становятся все более сложными, ресурсоемкие функции требуют от браузера все большего и большего. Если вы заинтересованы в мониторинге и отслеживании использования процессора на стороне клиента, использования памяти и многого другого для всех ваших пользователей в рабочей среде, попробуйте LogRocket.https://logrocket.com/signup/
LogRocket похож на DVR для Интернета. и мобильных приложений, записывая все, что происходит в вашем веб-приложении или на сайте. Вместо того, чтобы гадать, почему возникают проблемы, вы можете агрегировать и составлять отчеты по ключевым показателям производительности внешнего интерфейса, воспроизводить сеансы пользователей вместе с состоянием приложения, регистрировать сетевые запросы и автоматически отображать все ошибки.
Модернизируйте способы отладки веб-приложений и мобильных приложений — начните мониторинг бесплатно.
CSS Tie-Dye Gradient Backgrounds | Мириам Эрик Сюзанна
| пост
конический всплеск цвета
Вдохновение с игривым градиентом
На прошлой неделе, мой друг Дилан (младший разработчик ищет работу, если у вас есть лиды!) прислал мне вопрос о повышение производительности этого забавная размытая фоновая анимация:
См. размытие фона CSS Pen Moving от @miriamsuzanne на CodePen.
На моем компьютере все работает нормально, но на менее мощных устройствах может работать с перебоями Я сделал несколько небольших предложений,
и отправил ссылки на другие ресурсы производительности анимации.
Но это пост не о производительности анимации.
Я люблю чувство игривости
которые Дилан уже обнаружил в CSS —
несмотря на буткемпы кода в целом
не уделяя языку особого внимания.
Теперь я тоже хочу поиграть с размытым фоном!
Ищу текстуру
CSS {в реальной жизни}, Мишель Баркер написал отличный пост о Полутоновые шаблоны CSS. Мне всегда нравились полутоновые узоры, и я искал что-то добавить текстуру к моему новому дизайну сайта. Последние несколько использованных дизайнов полуслучайные полупрозрачные пузыри – что-то вроде этого, но с цветами, основанными на дизайне сайта:
См. круги Pen Random от @miriamsuzanne на CodePen.
Нажмите «Повторить» в правом нижнем углу, чтобы создать новые кругиМне нравится эта случайность, но пришло время попробовать что-то новое.
После игры с эффектом полутонов,
это было не совсем правильно в контексте.
Так что я пошел искать больше вдохновения.
Существует множество идей фоновых узоров CSS:
- Классика Леа Веру. Галерея шаблонов CSS3
- Темани Афиф CSS-Pattern.com
- Ана Тюдор Фоновые узоры, упрощенные с помощью конических градиентов
- Джим Раптис Фоновые шаблоны CSS инструмент
- И многое другое
Как всегда, У Аны Тюдор тоже есть серия фантастических демонстраций градиента на CodePen:
См. фоновые шаблоны карт Pen Single element от @thebabydino на CodePen.
См. фоновые шаблоны карт Pen Single element от @thebabydino на CodePen.
Конический и радиальный первый вариант
Я мог бы вернуться к некоторым из этих идей по дороге. Я представляю этот сайт потенциально имеющие разные шаблоны для разных разделов сайта – или, может быть, способ выбрать свой любимый шаблон? Но пока я пошел с шаблоном Темани Афиф что я очень люблю:
См.
шаблон Pen Fancy с использованием радиального градиента от @t_afif на CodePen.
Я поменял местами свои тонкие цвета фона сайта, и дополнительный радиальный градиент сверху. Я думаю, что шаблон будет слишком громоздким если он продолжался слишком далеко вниз по странице, так что это дает ему хорошее затухание с мягкими/изогнутыми краями.
См. справочную информацию о Pen Site от @miriamsuzanne на CodePen.
Смешанная градиентная краска для галстуков
Как часть игры и исследуя эти закономерности, Я понял оба конические градиенты и режим наложения фона обе функции хорошо поддерживаются.
Неудивительно, они были вокруг некоторое время сейчас, но я никогда не интегрировал их в мою работу раньше. Поэтому я потратил некоторое время на изучение, и мне очень понравился этот результат:
См.