css3按钮背景颜色无限过渡
Posted
技术标签:
【中文标题】css3按钮背景颜色无限过渡【英文标题】:css3 button background color infinite transition 【发布时间】:2012-06-06 07:36:36 【问题描述】:有没有办法仅使用 css3 使按钮的背景颜色从灰色渐变为蓝色,然后再变回灰色?一个很好的例子是默认操作按钮是可可吗?我知道这可以在 javascript 中完成,但我宁愿只使用 css。
【问题讨论】:
【参考方案1】:您好,我已经通过 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/
【讨论】:
【参考方案2】:如果您需要在 hover
或类似的东西上使用淡入淡出动画,CSS3 transition property 是您的解决方案。
编辑:
.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;
【讨论】:
你能提供这个问题的poper代码和一个演示链接 嗨@Tooraj它悬停属性,但我认为问题是自动更改为.btn的颜色 他要求的不是这个以上是关于css3按钮背景颜色无限过渡的主要内容,如果未能解决你的问题,请参考以下文章