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

На Блоггере предусмотрена смена изображения фона. Можно установить и свою картинку, и предложенную на выбор. А можно оставить фон белым.

Заходим в Тема - Настройки.

На странице вкладки Фон кликаем по прямоугольнику.
В открывшимся окне выбираем "Загрузить изображение", для установки своего фона.
Или выбираем картинку из имеющихся.

Сегодня предлагаю посмотреть и попробовать меняющийся цвет фона.

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

Устанавливаем код в шаблон блога - Тема- Изменить 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; }

и так далее.

Чем больше цветов, тем быстрее они меняются. Время в коде нужно будет увеличить.

Для фона можно подбирать как яркие радужные цвета, так и скромные, пастельные.