Как сделать задний фон в css

Анимированный фон веб-страницы на чистых HTML и CSS

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Перевод статьи «Amazing Pure HTML and CSS background animations».

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

Диагональный градиент

Написать такой код легко, а эффект получается очень интересный.

Скольжение диагоналей

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

Анимированный фон

Обратите внимание, насколько прост сам бэкграунд и насколько меняется его восприятие благодаря анимации.

Бесконечный паттерн

Отдельное спасибо @keyframes за бесконечную прокрутку!

Прекрасный анимированный бэкграунд

Просто задержитесь на мгновение и насладитесь тем, насколько привлекательна эта анимация. Такое приятное смешение цветов, а между тем оно совершенно не отвлекает внимание от названия на переднем плане.

Анимированный «лесной» фон

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

See the Pen Pure Css Animated Background by Mohammad Abdul Mohaiman (@mohaiman) on CodePen.

Снова диагональные линии

Плывущие облака

Да, в названии заявлено, что все на чистом СSS, но когда я увидел этот фон, не смог не добавить его в коллекцию, несмотря на то, что здесь использован CSS(Less).

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *