原型scriptaculous背景顏色：RGBA顏色動畫

Question

Prototype和scriptaculous是這樣的http://pioupioum.fr/sandbox/jquery-color/？

我要的期刊動畫RGBA我的網站後臺找些性感和花式...

Answer 1

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-count是infinite所以它不斷循環。請記住，要爲各種瀏覽器複製各個前綴爲-webkit-，-moz-和-o-的規則，並且爲未來的兼容性設置一個沒有前綴的規則。