Прототип скриптового фона: цветная анимация RGBA - PullRequest
Новая
       31

Прототип скриптового фона: цветная анимация RGBA

2 голосов
/ 07 октября 2011

Это что-то вроде http://pioupioum.fr/sandbox/jquery-color/ для Prototype и scriptaculous?

Я хочу периодически анимировать RGBA для фона моего сайта, чтобы получить что-то сексуальное и модное ...

1 Ответ

0 голосов
/ 07 октября 2011

rgba довольно недавно и поддерживается только новейшими браузерами . К счастью, это почти те же браузеры, которые также поддерживают CSS-переходы , поэтому библиотека Javascript не требуется. Просто посмотрите на этот рабочий пример: massblue.com

Источник объясняет это: 

body, #logo h1 a, ul#menu li.on {background-color: #39f !important;}
@-webkit-keyframes colours {
      0% {background-color: #39f;}
     15% {background-color: #8bc5d1;}
     30% {background-color: #f8cb4a;}
     45% {background-color: #95b850;}
     60% {background-color: #944893;}
     75% {background-color: #c71f00;}
     90% {background-color: #bdb280;}
    100% {background-color: #39f;}
}
body, #logo h1 a, ul#menu li.on {
    -webkit-animation-direction: normal;
    -webkit-animation-duration: 60s;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-name: colours;
    -webkit-animation-timing-function: ease;
}

Ключевые кадры называют «цвета» как последовательность кадров, которая затем используется в правиле animation-name. animation-iteration-count равен infinite, поэтому он постоянно зацикливается. Не забудьте продублировать правила с каждым из префиксов -webkit-, -moz- и -o- для различных браузеров и один набор без префикса для будущей совместимости.

...