Анимация градиентов для фона сайта | uCoz - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 04.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

Анимированный вид фона сайта с применением градиентов




Линейным градиентам фона добавлен эффект анимации.Применены шесть стилей градиентов для анимированного перехода,но при желании можно увеличить их количество.Сами градиенты Вы можете сделать в "Генераторе градиентов фона",в коде градиенты выделены комментариями.Для применения анимации градиентов фона на сайте,фон нужно сначала сделать прозрачным.Фон сайта uCoz обычно регулируется в строке

background:#000 url('/images/body_bg.jpg') top left repeat-x fixed;

Потребуется заменить такую строку на

background:transparent;

Перед заменой обязательно делайте копию оригинала "Таблицы стилей CSS",в которой находится регулировка фона.Если появились вопросы,воспользуйтесь формой комментариев материала.





Пример кода для фона

Вы можете проверить работу кода в HTML редакторе который находится в нижней части материала.Но для установки в "Таблице стилей CSS" сайта нужно будет удалить из кода теги <style> и </style>,они нужны только для проверки в редакторе.


<style>
ul#gradient-style {
list-style:none;
}
.ds-content-gradient {
margin:0;
width:100%;
height:100%;
top:0px;
left: 0px;
z-index: -1;
}
.ds-content-gradient li#gradient-url span#gradient-content {
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: linear-gradient-animation 36s linear infinite 0s;
-moz-animation: linear-gradient-animation 36s linear infinite 0s;
-o-animation: linear-gradient-animation 36s linear infinite 0s;
-ms-animation: linear-gradient-animation 36s linear infinite 0s;
animation: linear-gradient-animation 36s linear infinite 0s;
}
.ds-content-gradient li#gradient-url:nth-child(1) span#gradient-content {
/* -- Начало градиента -- */
background: rgb(241, 171, 120);
background: -webkit-linear-gradient(2deg, rgb(241, 171, 120) 0%, rgb(17, 0, 0) 100%);
background: -o-linear-gradient(2deg, rgb(241, 171, 120) 0%, rgb(17, 0, 0) 100%);
background: -ms-linear-gradient(2deg, rgb(241, 171, 120) 0%, rgb(17, 0, 0) 100%);
background: linear-gradient(2deg, rgb(241, 171, 120) 0%, rgb(17, 0, 0) 100%);
/* -- Конец градиента -- */
}
.ds-content-gradient li#gradient-url:nth-child(2) span#gradient-content {
/* -- Начало градиента -- */
background: rgb(108, 171, 255);
background: -webkit-linear-gradient(2deg, rgb(108, 171, 255) 0%, rgb(17, 166, 0) 100%);
background: -o-linear-gradient(2deg, rgb(108, 171, 255) 0%, rgb(17, 166, 0) 100%);
background: -ms-linear-gradient(2deg, rgb(108, 171, 255) 0%, rgb(17, 166, 0) 100%);
background: linear-gradient(2deg, rgb(108, 171, 255) 0%, rgb(17, 166, 0) 100%);
/* -- Конец градиента -- */
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.ds-content-gradient li#gradient-url:nth-child(3) span#gradient-content {
/* -- Начало градиента -- */
background: rgb(127, 12, 255);
background: -webkit-linear-gradient(2deg, rgb(127, 12, 255) 0%, rgb(117, 166, 0) 100%);
background: -o-linear-gradient(2deg, rgb(127, 12, 255) 0%, rgb(117, 166, 0) 100%);
background: -ms-linear-gradient(2deg, rgb(127, 12, 255) 0%, rgb(117, 166, 0) 100%);
background: linear-gradient(2deg, rgb(127, 12, 255) 0%, rgb(117, 166, 0) 100%);
/* -- Конец градиента -- */
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.ds-content-gradient li#gradient-url:nth-child(4) span#gradient-content {
/* -- Начало градиента -- */
background: rgb(127, 12, 80);
background: -webkit-linear-gradient(2deg, rgb(127, 12, 80) 0%, rgb(63, 166, 0) 100%);
background: -o-linear-gradient(2deg, rgb(127, 12, 80) 0%, rgb(63, 166, 0) 100%);
background: -ms-linear-gradient(2deg, rgb(127, 12, 80) 0%, rgb(63, 166, 0) 100%);
background: linear-gradient(2deg, rgb(127, 12, 80) 0%, rgb(63, 166, 0) 100%);
/* -- Конец градиента -- */
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.ds-content-gradient li#gradient-url:nth-child(5) span#gradient-content {
/* -- Начало градиента -- */
background: rgb(141, 0, 255);
background: -webkit-linear-gradient(2deg, rgb(141, 0, 255) 0%, rgb(255, 134, 138) 100%);
background: -o-linear-gradient(2deg, rgb(141, 0, 255) 0%, rgb(255, 134, 138) 100%);
background: -ms-linear-gradient(2deg, rgb(141, 0, 255) 0%, rgb(255, 134, 138) 100%);
background: linear-gradient(2deg, rgb(141, 0, 255) 0%, rgb(255, 134, 138) 100%);
/* -- Конец градиента -- */
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.ds-content-gradient li#gradient-url:nth-child(6) span#gradient-content {
/* -- Начало градиента -- */
background: rgb(0, 0, 0);
background: -webkit-linear-gradient(2deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%);
background: -o-linear-gradient(2deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%);
background: -ms-linear-gradient(2deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%);
background: linear-gradient(2deg, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 100%);
/* -- Конец градиента -- */
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes linear-gradient-animation {
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 linear-gradient-animation {
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 linear-gradient-animation {
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 linear-gradient-animation {
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 linear-gradient-animation {
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="ds-content-gradient" id="gradient-style">
<li id="gradient-url"><span id="gradient-content"></span></li>
<li id="gradient-url"><span id="gradient-content"></span></li>
<li id="gradient-url"><span id="gradient-content"></span></li>
<li id="gradient-url"><span id="gradient-content"></span></li>
<li id="gradient-url"><span id="gradient-content"></span></li>
<li id="gradient-url"><span id="gradient-content"></span></li>
</ul>


Проверьте код в редакторе

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









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



Ссылка:
BB code:




  • ©
  • | Просмотров: 2372 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: анимация фона, анимированый фон

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

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