Меняющийся фон | Скрипт для сайта uCoz - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Четверг, 08.12.2016
Скрипты для uCoz » Эффекты для сайта uCoz » Меняющийся фон | Скрипт для сайта uCoz

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Меняющийся фон | Скрипт для сайта uCoz


Делаем меняющийся цвет фона сайта c помощью свойств CSS3




Для изменения цвета фона Вашего сайта потребуется найти в Таблице стилей (CSS) элемент,к которому подключён показ цвета фона или картинки.Мне доводилось наблюдать в стандартных дизайнах прикрепление показа фона за тегом <body>.Но может быть так,что фон закреплён за другим элементом таблицы стилей.В любом случае Вам не трудно будет его обнаружить,элемент за которым закреплён фон сайта находится в верхней части таблицы стилей.Когда обнаружите элемент,замените находящийся в нём код на тот что находится в примере находящемся ниже,но обратите внимание что в примере показ фона закреплён за тегом body.Вам нужно будет скопировать только код находящийся в скобках { ЗДЕСЬ } и поместить его в скобки Вашего элемента.На сайте есть статьи по всем существующим свойствам CSS3,можете ввести название свойства в поиск сайта и посмотреть его возможности,или найдите его в списке блока с права от статьи.Свойства с префиксами -moz-,-webkit-,-o-,-ms- заменяют основное свойство,они предназначены для отдельно взятых браузеров и их возможности аналогичны основному свойству.Вы можете изменить последовательность и сами цвета применяющиеся в изменении фона,главное прописывайте последовательность для всех одинаковую,как в примере.
Имейте в запасе сохранённую версию Вашей таблицы стилей CSS,скопируйте в запас родные настройки для возможности возврата значений!!!




Пример кода для изменения цвета фона


<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>

Проверьте работу меняющегося фона

Вставьте код в HTML редактор и проверьте.









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 3725 | Добавил: IZOTOP | Рейтинг: 5.0/1
    | Теги: Смена Фона, меняющийся фон, анимированный фон, разный фон, другой фон

    Вы будете первый кто оставит комментарий

    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]