В гостях у Домового

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » В гостях у Домового » Праздничные украшения для форумов 2х2 » Задний фон форума со снегом и плавно меняющимся цветом.


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

Сообщений 1 страница 10 из 10

1

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

Скриншот:

http://savepic.org/6640247m.jpg

В CSS

body {
background-attachment: fixed; /*фиксированное положение фона*/
background-color:#000; /*основной цвет фона*/
background-image:url('http://i39.servimg.com/u/f39/14/80/95/87/1110.png'),
url('http://i39.servimg.com/u/f39/14/80/95/87/2210.png'),
url('http://i39.servimg.com/u/f39/14/80/95/87/3310.png'); /*картинки снега*/
background-repeat: repeat;
-webkit-animation:snow 30s linear infinite;
-moz-animation:snow 30s linear infinite;
-ms-animation:snow 30s linear infinite;
animation:snow 30s linear infinite;
}

/*Keyframes*/
@keyframes snow {
0%{background-position:0px 0px, 0px 0px, 0px 0px;}
25%{background-color:#800000;}
50%{background-color:#008B00;}
75%{background-color:#00008B;}
100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;} /*цвет завершения переходного цикла фона*/
}
@-moz-keyframes snow {
0%{background-position:0px 0px, 0px 0px, 0px 0px;}
25%{background-color:#800000;}
50%{background-color:#008B00;}
75%{background-color:#00008B;}
100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;} /*цвет завершения переходного цикла фона*/
}
@-webkit-keyframes snow {
0%{background-position:0px 0px, 0px 0px, 0px 0px;}
25%{background-color:#800000;}
50%{background-color:#008B00;}
75%{background-color:#00008B;}
100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;} /*цвет завершения переходного цикла фона*/
}
@-ms-keyframes snow {
0%{background-position:0px 0px, 0px 0px, 0px 0px;}
25%{background-color:#800000;}
50%{background-color:#008B00;}
75%{background-color:#00008B;}
100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;} /*цвет завершения переходного цикла фона*/
}

Основной цвет и завершающий должны быть одинаковыми.
Код цвета в строчках

25%{background-color:#800000;}
50%{background-color:#008B00;}
75%{background-color:#00008B;}

можно менять на свой вкус как и основной цвет фона.

ДЕМО

0

2

Добрый день.Классный "Задний фон форума со снегом и плавно меняющимся цветом."У себя на сайте поставил до Нового года и сейчас стоит.А можете подсказать как сделать,чтобы меняющийся фон так и оставался,но только без снега...

0

3

IESHYA написал(а):

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

Ставьте это

Код:
body {
background-image:none;
background-color:#000; /*основной цвет фона*/
-webkit-animation:snow 30s linear infinite;
-moz-animation:snow 30s linear infinite;
-ms-animation:snow 30s linear infinite;
animation:snow 30s linear infinite;
}
/*Keyframes*/
@keyframes snow { 
0%{background-position:0px 0px, 0px 0px, 0px 0px;}
25%{background-color:#800000;}
50%{background-color:#008B00;}
75%{background-color:#00008B;}
100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;} /*цвет завершения переходного цикла фона*/
}
@-moz-keyframes snow { 
0%{background-position:0px 0px, 0px 0px, 0px 0px;}
25%{background-color:#800000;}
50%{background-color:#008B00;}
75%{background-color:#00008B;}
100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;} /*цвет завершения переходного цикла фона*/
}
@-webkit-keyframes snow { 
0%{background-position:0px 0px, 0px 0px, 0px 0px;}
25%{background-color:#800000;}
50%{background-color:#008B00;}
75%{background-color:#00008B;}
100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;} /*цвет завершения переходного цикла фона*/
}
@-ms-keyframes snow { 
0%{background-position:0px 0px, 0px 0px, 0px 0px;}
25%{background-color:#800000;}
50%{background-color:#008B00;}
75%{background-color:#00008B;}
100%{background-position: 500px 1000px, 400px 400px, 300px 300px;background-color:#000;} /*цвет завершения переходного цикла фона*/
}

0

4

Спасибо огромное....Работает.

Отредактировано IESHYA (13.01.2016 17:52)

0

5

Пользуйтесь на здоровье!!

0

6

Куда вставить код фона?

0

7

starshina написал(а):

Куда вставить код фона?

Там же написано, В CSS

0

8

Домовой написал(а):

Там же написано, В CSS

Прошу прощения, но я не знаю где это... Поставил  в ВЕРХ. Снег пошёл. Спасибо!

0

9

Ну вообще то этот код для форумов сервиса 2х2.
Для форумов myBB вот Задний фон форума со снегом и плавно меняющимся цветом.

0

10

Домовой написал(а):

Ну вообще то этот код для форумов сервиса 2х2.
Для форумов myBB вот Задний фон форума со снегом и плавно меняющимся цветом.

Спасибо.

0


Вы здесь » В гостях у Домового » Праздничные украшения для форумов 2х2 » Задний фон форума со снегом и плавно меняющимся цветом.


Рейтинг форумов | Создать форум бесплатно