» » Меняющийся фон на Блоггер

Меняющийся фон на Блоггер

На Блоггере предусмотрена смена изображения фона. Можно установить и свою картинку, и предложенную на выбор. А можно оставить фон белым.
тема
Заходим в Тема - Настройки.
тема 2
  1. На странице вкладки Фон кликаем по прямоугольнику.
  2. В открывшимся окне выбираем "Загрузить изображение", для установки своего фона.
  3. Или выбираем картинку из имеющихся.
Сегодня предлагаю посмотреть и попробовать меняющийся цвет фона. 
Сперва фон будет одного цвета, через несколько секунд другого и так далее. Прежде чем устанавливать данный фон, удалите или отключите имеющийся. 
Устанавливаем код в шаблон блога - Тема- Изменить HTML. Находим тег ]]></b:skin> и выше него добавляем код.

Оформление фона

Выглядеть фон будет так:
Оформление фона
В примере показан фон второго кода.
Код 1:
body {
animation: colorBackground 22s infinite; 
-webkit-animation: colorBackground 22s infinite; 
-moz-animation: colorBackground 22s infinite; 
-o-animation: colorBackground 22s infinite; 
}
@keyframes colorBackground {
0% { background-color: #B461FB; color: #B461FB; }
20% { background-color: #74E588; color: #74E588; }
40% { background-color: #F98585; color: #F98585; }
60% { background-color: #50BFE1; color: #50BFE1; }
80% { background-color: #4256EF; color: #4256EF; }
100% { background-color: #B461FB; color: #B461FB; }
}
@-webkit-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}
@-moz-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}
@-o-keyframes colorBackground {
0% {background-color: #B461FB; color: #B461FB;}
20% {background-color: #74E588; color: #74E588;}
40% {background-color: #F98585; color: #F98585;}
60% {background-color: #50BFE1; color: #50BFE1;}
80% {background-color: #4256EF; color: #4256EF;}
100% {background-color: #B461FB; color: #B461FB;}
}
В коде можно поменять:
Скорость смены цветов - выделила красным цветом
Цвета меняем ниже в коде попарно, 4 раза. (Один и тот же цвет меняем на другой 8 раз). 
Если вам мало 6 цветов фона, то можно установить код с 11 цветами:
Код 2:
body {
animation: colorBackground 22s infinite; 
-webkit-animation: colorBackground 22s infinite; 
-moz-animation: colorBackground 22s infinite; 
-o-animation: colorBackground 22s infinite; 
}
@keyframes colorBackground {
0% { background-color: #B461FB; color: #B461FB; }
10% { background-color: #c5894d; color: #c5894d; }
20% { background-color: #74E588; color: #74E588; }
30% { background-color: #610707; color: #610707; }
40% { background-color: #F98585; color: #F98585; }
50% { background-color: #c40000; color: #c40000; }
60% { background-color: #50BFE1; color: #50BFE1; }
70% { background-color: #ff6700; color: #ff6700; }
80% { background-color: #4256EF; color: #4256EF; }
90% { background-color: #6600ff; color: #6600ff; }
100% { background-color: #B461FB; color: #B461FB; }
}
@-webkit-keyframes colorBackground {
0% { background-color: #B461FB; color: #B461FB; }
10% { background-color: #c5894d; color: #c5894d; }
20% { background-color: #74E588; color: #74E588; }
30% { background-color: #610707; color: #610707; }
40% { background-color: #F98585; color: #F98585; }
50% { background-color: #c40000; color: #c40000; }
60% { background-color: #50BFE1; color: #50BFE1; }
70% { background-color: #ff6700; color: #ff6700; }
80% { background-color: #4256EF; color: #4256EF; }
90% { background-color: #6600ff; color: #6600ff; }
100% { background-color: #B461FB; color: #B461FB; }
}
@-moz-keyframes colorBackground {
0% { background-color: #B461FB; color: #B461FB; }
10% { background-color: #c5894d; color: #c5894d; }
20% { background-color: #74E588; color: #74E588; }
30% { background-color: #610707; color: #610707; }
40% { background-color: #F98585; color: #F98585; }
50% { background-color: #c40000; color: #c40000; }
60% { background-color: #50BFE1; color: #50BFE1; }
70% { background-color: #ff6700; color: #ff6700; }
80% { background-color: #4256EF; color: #4256EF; }
90% { background-color: #6600ff; color: #6600ff; }
100% { background-color: #B461FB; color: #B461FB; }
}
@-o-keyframes colorBackground {
0% { background-color: #B461FB; color: #B461FB; }
10% { background-color: #c5894d; color: #c5894d; }
20% { background-color: #74E588; color: #74E588; }
30% { background-color: #610707; color: #610707; }
40% { background-color: #F98585; color: #F98585; }
50% { background-color: #c40000; color: #c40000; }
60% { background-color: #50BFE1; color: #50BFE1; }
70% { background-color: #ff6700; color: #ff6700; }
80% { background-color: #4256EF; color: #4256EF; }
90% { background-color: #6600ff; color: #6600ff; }
100% { background-color: #B461FB; color: #B461FB; }
}
Во втором коде только добавлены промежуточные проценты и новые пары цветов. По аналогии можно сделать у фона и больше оттенков, например:
0% { background-color: #B461FB; color: #B461FB; }
5% { background-color: #c5894d; color: #c5894d; }
10% { background-color: #74E588; color: #74E588; }
15% { background-color: #610707; color: #610707; }
20% { background-color: #50BFE1; color: #50BFE1; }
25% { background-color: #ff6700; color: #ff6700; }
и так далее.
Чем больше цветов, тем быстрее они меняются. Время в коде нужно будет увеличить.
Для фона можно подбирать как яркие радужные цвета, так и скромные, пастельные.

Ваши комментарии:

Комментарии со спамом удаляются.