Главная »
2014 » Июль » 7 » Меняющийся цвет фона сайта
18:33 Меняющийся цвет фона сайта |
Для изменения цвета фона Вашего сайта потребуется найти в Таблице стилей (CSS) элемент,к которому подключён показ цвета фона или картинки.Обычно фон закреплён за тегом body и выгдядит примерно так.
body {background:#000000 url(Ссылка) fixed no-repeat 100% 0;}.Но может быть так,что фон закреплён за другим элементом таблицы стилей.В любом случае Вам не трудно будет его обнаружить,элемент за которым закреплён фон сайта находится в верхней части таблицы стилей.Когда обнаружите элемент,замените находящийся в нём код на тот что находится в примере находящемся ниже,но обратите внимание что в примере показ фона закреплён за тегом body.Вам нужно будет скопировать только код находящийся в скобках { ЗДЕСЬ } и поместить его в скобки Вашего элемента.Свойства с префиксами -moz-,-webkit-,-o-,-ms- заменяют основное свойство,они предназначены для отдельно взятых браузеров и их возможности аналогичны основному свойству.Цвета можно заменить на свои.
Пример кода для изменения цвета фона
<style>
body {
animation-name: colorbackground;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-duration: 60s;
animation-direction: alternate;
-moz-animation-name: colorbackground;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-duration: 60s;
-moz-animation-direction: alternate;
-webkit-animation-name: colorbackground;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-duration: 60s;
-webkit-animation-direction: alternate;
-o-animation-name: colorbackground;
-o-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-duration: 60s;
-o-animation-direction: alternate;
-ms-animation-name: colorbackground;
-ms-animation-timing-function: linear;
-ms-animation-iteration-count: infinite;
-ms-animation-duration: 60s;
-ms-animation-direction: alternate;
}
@-moz-keyframes colorbackground {
0% { background-color: blue; }
20% { background-color: red; }
40% { background-color: green; }
60% { background-color: black; }
80% { background-color: indigo; }
100% { background-color: gold; }
}
@-webkit-keyframes colorbackground {
0% { background-color: blue; }
20% { background-color: red; }
40% { background-color: green; }
60% { background-color: black; }
80% { background-color: indigo; }
100% { background-color: gold; }
}
@-o-keyframes colorbackground {
0% { background-color: blue; }
20% { background-color: red; }
40% { background-color: green; }
60% { background-color: black; }
80% { background-color: indigo; }
100% { background-color: gold; }
}
@-ms-keyframes colorbackground {
0% { background-color: blue; }
20% { background-color: red; }
40% { background-color: green; }
60% { background-color: black; }
80% { background-color: indigo; }
100% { background-color: gold; }
}
@keyframes colorbackground {
0% { background-color: blue; }
20% { background-color: red; }
40% { background-color: green; }
60% { background-color: black; }
80% { background-color: indigo; }
100% { background-color: gold; }
}
</style
|
Просмотров: 771 |
Добавил: dark1981
| Рейтинг: 0.0/0 |