Меняющийся фон Counter Strike для сайта
Фон будет работать если стили сайта сделаны без ошибок ( я испытывал его на 4 сайтах,на 1 он не работал из за неправильной таблицы стилей,в частности свойства z-index расставленного непоследовательно).Дополнительно стоит обратить внимание элемент управляющий показом фона,обычно за таким элементом привязана имеющаяся картинка фона.выглядит такой элемент приблизительно так ▼
background:#000 url('/images/body_bg.jpg') top left repeat-x fixed;
Вам нужно будет его изменить,сделав его прозрачным то есть заменить на ▼
background:transparent;
Далее,на используемых страницах модулей вставить код который находится ниже сразу после тега <body>.Имеются в виду все модули,включая "Пользователи","Гостевая книга","Поиск по сайту" + разумеется основные модули с материалом,такие как "Каталог файлов","Блог" и тд.
Самое главное!!!
Обязательно делайте копию Вашего файла CSS перед изменением,вдруг что пойдёт не так - замените.Всё должно работать если нет погрешностей в вёрстке самого сайта - это безоговорочное условие!Для примера можете посмотреть применение фона на этом сайте.
Код устанавливаем на страницах модулей после <body>
<style>
ul#fonstyly {
list-style:none;
}
.dsimageanimation {
margin:0;
width:100%;
height:100%;
top:0px;
left: 0px;
z-index: -1;
}
.dsimageanimation li#fonlink span#fondrive {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
-ms-background-size:100% 100%;
background-repeat: none;
background-attachment: fixed;
opacity: 0;
z-index: -1;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.dsimageanimation li#fonlink:nth-child(1) span#fondrive {
background-image: url(http://delaisait.ucoz.ru/script/img/css/cssfon_7.jpg);
}
.dsimageanimation li#fonlink:nth-child(2) span#fondrive {
background-image: url(http://delaisait.ucoz.ru/script/img/css/cssfon_2.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.dsimageanimation li#fonlink:nth-child(3) span#fondrive {
background-image: url(http://delaisait.ucoz.ru/script/img/css/cssfon_3.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.dsimageanimation li#fonlink:nth-child(4) span#fondrive {
background-image: url(http://delaisait.ucoz.ru/script/img/css/cssfon_4.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.dsimageanimation li#fonlink:nth-child(5) span#fondrive {
background-image: url(http://delaisait.ucoz.ru/script/img/css/cssfon_5.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.dsimageanimation li#fonlink:nth-child(6) span#fondrive {
background-image: url(http://delaisait.ucoz.ru/script/img/css/cssfon_6.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% {opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
</style>
<ul class="dsimageanimation" id="fonstyly">
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
</ul>
|