原型scriptaculous背景颜色:RGBA颜色动画

时间:2011-10-07 09:44:48

标签: prototypejs scriptaculous rgba

对于Prototype和scriptaculous这样的http://pioupioum.fr/sandbox/jquery-color/是什么?

我想为我的网站背景定期制作​​RGBA动画,以获得性感和花哨的东西......

1 个答案:

答案 0 :(得分:0)

rgba是最近的only supported by the newest browsers。幸运的是,这些浏览器也支持CSS transitions,因此不需要Javascript库。请看这个工作示例:massiveblue.com


source解释了它:

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-countinfinite,因此它会不断循环播放。请务必使用各种浏览器的前缀-webkit--moz--o-复制规则,并为未来的兼容性设置一个没有前缀的集合。