2011-10-07 94 views

回答

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-的规则,并且为未来的兼容性设置一个没有前缀的规则。

+0

感谢您的帮助pal;) – beater

+0

不客气,欢迎来到StackOverflow。如果您使用答案,可以勾选旁边的复选标记,将其标记为已接受,以便其他人可以看到,并且您也可以获得答案! – clockworkgeek

+0

StackOverflow - 真棒;) – beater