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