有没有办法只使用css3使按钮的背景颜色从灰色变为蓝色然后再变回灰色?一个很好的例子是默认操作按钮是可可吗?我知道这可以在 javascript 中完成,但我宁愿只使用 css。
问问题
42695 次
2 回答
42
嗨,我已经通过 CSS3 动画制作了按钮,请看一下,我希望它接近你的问题:-
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 过渡和动画http://css3.bradshawenterprises.com/cfimg/
于 2012-06-01T05:52:35.270 回答
5
如果您需要淡入淡出动画hover
或类似的东西,CSS3 过渡属性是您的解决方案。
编辑:
.btn {
background-color: lightblue;
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
-moz-transition: all 0.3s ease-out; /* FF4+ */
-ms-transition: all 0.3s ease-out; /* IE10 */
-o-transition: all 0.3s ease-out; /* Opera 10.5+ */
transition: all 0.3s ease-out;
}
.btn:hover {
background-color: lightgreen;
}
于 2012-06-01T05:57:28.280 回答