开发者

Prototype scriptaculous background-color: RGBA color animations

Is something like this http://pioupioum.fr/sandbox/jquery-color/ for Prototype and scriptaculous?

I want to periodical animate 开发者_如何学CRGBA for my website background to get something sexy and fancy...


rgba is pretty recent and only supported by the newest browsers. Luckily these are pretty much the same browsers that also support CSS transitions so no Javascript library is needed. Just look at this working example: massiveblue.com


The source explains it:

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

The keyframes names "colours" as the sequence of frames, that is then used in animation-name rule. The animation-iteration-count is infinite so it loops continuously. Remember to duplicate the rules with each of the prefixes -webkit-, -moz- and -o- for the various browsers, and one set with no prefix for future compatibility.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜