Анимация градиентов на Вашем сайте
Код для фона
Вы можете проверить работу кода в 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>
|