Главная » Статьи » украшения для сайта

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

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

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

background:transparent;

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

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



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


Категория: украшения для сайта | Добавил: NAREK (17.11.2012)
Просмотров: 1095 | Рейтинг: 5.0/1
Всего комментариев: 0
Имя *:
Email *:
Код *:

Реклама

SEO sprint - максимальная раскрутка сайтов!

Top Шаблоны

  • DEXTER
  • GamerPress
  • IRENE
  • ENGAMER
  • Наш опрос

    • Оцените мой сайт
      Всего ответов: 22




    Статистика

    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0