Как сделать анимированный фон на странице
Пару дней назад мне задали вопрос по поводу того, как сделать анимированный фон на странице. При этом человек знал и про background, и про CSS. Он у меня попросил скрипт на JavaScript, позволяющий делать анимацию фона. Я ему сказал, что здесь JavaScript совсем не нужен. И показал ему, как можно сделать анимированный фон только с применением CSS. Вот об этом способе я и напишу в данной статье.
Способ совершенно тривиальный и простой, думаю, что многие до него додумаются сразу. Вот CSS-код:
html <
background: url(images/bg.gif) no-repeat; /* Задаём фон GIF-картинкой */
height: 100%; /* 100% высота страницы */
>
Ключевым моментом здесь является GIF-изображение. Думаю, что Вам известно, что в GIF можно делать достаточно сложную анимацию (в рамках целесообразности, конечно). Поэтому никаких скриптов не нужно, чтобы сделать любой фон, а не только страницы, анимированным.
Таким образом, достаточно создать анимированный GIF, вставить его на страницу самым простым CSS-кодом, и у Вас получится анимированный фон на странице.
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 19 ):
Совсем просто интересно зачем задавали такой вопрос
Не нашел где спросить, спрошу тут) У меня есть сайт свой, могу показать если попросите, так вот, когда я его открываю через телефон (iphone), то он открывает его не весь, а часть где-то 80%, когда все остальные сайты открываются на 100% такая же фигня и в яндекс баре (закладки) там окошки с сайтами, так же на окошке этом сайт виден на 80% а все остальные вмещает на 100%. Сравнивал CSS коды, разницы существенной не заметил, Помогите пожалуйста) Как то туфтово все описал, думаю Вы поймете)
Дело в вёрстке, точнее в её низком качестве. Ничего сказать невозможно, кроме как посоветовать научиться хорошо верстать и всё сделать заново. Вот курс по вёрстке: http://srs.myrusakov.ru/makeup
Михаил! Помогите! У меня на сайте есть шапка и на шапке кнопки! Если смотреть на сайте при масштабе 100% то всё нормально, но если смотреть на 50% или 200% и т.п. Шапка и кнопки сдвигаются! А на вашем сайте только масштаб уменьшается, а кнопки остаются на местах! Как вы это сделалил напишите пожалуйста.
Используйте относительные размеры (то есть проценты), тогда они будут изменяться в зависимости от масштаба.
Я пробовал! Но если я ставлю width = 100%; То у меня появляются отступы слева и справо! Тоже самое и с высотой! Что делать?
Отступы слева и справа — это margin (или padding). Вряд ли они у изображения, возможно, они у body. Поэтому поставьте у body
У меня шапка залита в <head>. Поставить это в head. Или перенести шапку в body?
В <head> вообще не должно быть контента. Весь контент в <body>.
перенесу шапку в body и сделаю как вы писали! Спасибо
Шапку сделал как вы сказали! Всё нормально! А вот у меня прямо на шапке есть кнопки навигации! Как с ними быть? Потому что если я меняю масштаб то шапка остаётся как было, а кнопки сдвигаются кто куда! Попробовал расставить кнопки на шапке с помощью % , а не px! Но это не помогло!
Значит проблема в Вашей верстке. Что именно происходит с кнопками?
У меня сделаны анимированные кнопки по вашему уроку http://myrusakov.ru/css-hover-image.html Ну вот когда я меняю масштаб в браузере то кнопки(которые сделаны на картинке-шапке) Начинают "Прыгать"! Сбивается их положение! Если они были до этого на шапке то они выходят за её пределы и т.п.
Они так и должны прыгать. Иначе придется ставить фиксированное position. Задавать left, top и так далее.
Нужно position: absolute; и свойства left, top, right и bottom. И ещё margin-top, а не margin top.
Всё равно что-то не получается!:( вот код: .but < top: 220px; position: absolute; right:100px; bottom:290px; left: 500px; >И тем не менее они всё равно смещаются
Всё! Вроде разобрался! Заместо position: absolute ПОСТАВИЛ: position: static (что в прочем и так по умолчанию стоит!) И всё стало норм!:)
У меня почему-то не получилось задать фон таким способом.
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
How can i make infinite flowing background with only CSS?
I’m just started to web programming, cuz many cooooool pages on awwwards.com — definitely caught my mind.
anyway, the first page what i aim for make is the pinterest (www.pinterest.com); slowly moving background with blur effect, floating modal and bottom fixed footer.
with some kinda O’Reilly books, the blur, modal and footer are no more problem. but i couldn’t made the background even with them yet.
so, how can i make horizontally infinite flowing background with only CSS. (without JS)
31 CSS Animated Backgrounds
Collection of hand-picked free HTML and CSS animated background code examples from Codepen, Github and other resources. Update of April 2021 collection. 9 new items.
Related Articles
Author
- Temani Afif
- August 13, 2022
Links
Made with
- HTML / CSS
About a code
CSS Only Pattern Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Bárbara Rodríguez
- July 25, 2022
Links
Made with
- HTML / CSS
About a code
Gradient Background with Waves
Gradient background with some waves on the bottom of the page. If you want a different background for you website or app this is a simple way.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Wil van der Tuin
- June 11, 2022
Links
Made with
- HTML / CSS (SCSS)
About a code
Blurred Animated Gradients
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Diyorbek Olimov
- August 21, 2021
Links
Made with
- HTML / CSS
About a code
Bubble Background Animation
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Temani Afif
- July 19, 2021
Links
Made with
- HTML / CSS
About a code
Hexagon Background with 0 HTML
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Ryan Mulligan
- November 6, 2020
Links
Made with
- HTML / CSS
About a code
CSS linear-gradient Animations
Animating a stack of linear-gradients.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Alison Quaglia
- July 19, 2020
Links
Made with
- HTML / CSS (SCSS)
About a code
Floating Color Orbs
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- alphardex
- June 23, 2020
Links
Made with
- HTML / CSS (SCSS)
About a code
Shooting Star
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- alphardex
- June 16, 2020
Links
Made with
- HTML / CSS (SCSS)
About a code
Bubble Float
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Casthra Demosthene
- October 2, 2019
Links
Made with
- HTML / CSS
About a code
Falling Leaves CSS Animation
October falling leaves CSS animation CSS no JavaScript.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Mathieu S.
- September 27, 2019
Links
Made with
- HTML / CSS
About a code
Noise Background
CSS only animated static noise background.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Author
- Adam Abundis
- September 27, 2019
Links
Made with
- HTML / CSS
About a code
Pattern Animation (Infinite)
Used Flexbox to vertically and horizontally center text. Used keyframes to set an infinite scroll.
15 Amazing CSS Background Effects
Did you know that you can use CSS to create beautiful animations and interesting effects? Combined with HTML and JavaScript, or even on its own, CSS can be extremely powerful. You’d be surprised at what developers can create. From simple scrolling animations to complex environments built entirely of code, these CSS background effects can add a lot of personality to your website.
What if you could use CSS background effects created by others for free? Sites like CodePen were made to host open source or other freely-licensed code, which means you can use it in your own projects with few-to-no stipulations.
This is also helpful for designers who want to learn CSS or pull off a similar, but personalized look. You can use these code snippets as a base to create your own effects.
There are a ton of developers who have created amazing CSS background effects and released them for free. Today we’ve collected 15 of the most stunning ones. See for yourself what you can do with a creative mind and a little code!
UNLIMITED DOWNLOADS: Email, admin, landing page & website templates
Starting at only $16.50 per month!
DOWNLOAD NOW