prototypejs - 原型脚本背景颜色：RGBA 彩色动画

Question

原型和 scriptaculous有类似http://pioupioum.fr/sandbox/jquery-color/的东西吗？

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

Answer 1

rgba是相当新的，仅受最新浏览器支持。幸运的是，这些浏览器几乎都支持CSS 转换，因此不需要 Javascript 库。看看这个工作示例：massiveblue.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-为各种浏览器复制规则，并为将来的兼容性设置一个不带前缀的规则。