CSS3按钮背景色无限过渡 [英] css3 button background color infinite transition

问题描述

是否有一种方法可以仅使用css3来使按钮的背景颜色从灰色渐变为蓝色，然后又变为灰色？一个很好的例子是默认操作按钮是可可吗？我知道这可以用javascript完成，但我宁愿只使用CSS。

Is there a way to make a button's background color fade from grey to blue then back to gray using only css3? A good example is a default action button is cocoa? I know this can be done in javascript but I'd rather only use css for this.

推荐答案

我做了按钮通过CSS3动画，请希望它靠近您的问题：-

Hi i have made the button through CSS3 Animation please have look i hope its near to your question:-

HTML

<input type="submit" value="submit" class="button" />

CSS

.button {
    width:100px;
    height:20px;
    background:red;
    animation:myfirst 5s;
    -moz-animation:myfirst 5s infinite; /* Firefox */
    -webkit-animation:myfirst 5s infinite; /* Safari and Chrome */
}

@-moz-keyframes myfirst /* Firefox */ {
    0% {background:red;}
    50% {background:yellow;}
    100% {background:red;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */ {
    0% {background:red;}
    50% {background:yellow;}
    100% {background:red;}
}

请参阅演示：- http：// jsbin .com / osohak / 7 / edit

详细了解CSS3 Transitions&动画 http://css3.bradshawenterprises.com/cfimg/

read more about CSS3 Transitions & Animation http://css3.bradshawenterprises.com/cfimg/

这篇关于CSS3按钮背景色无限过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！