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按钮背景颜色无限过渡的主要内容,如果未能解决你的问题,请参考以下文章

背景颜色和背景图像 CSS3 之间的过渡

div背景颜色怎样渐变 css实现div层背景颜色渐变代码

CSS CSS3:颜色和背景过渡效果

怎么设计css网页背景颜色过渡?

CSS3单向过渡?

javascript css3每2秒改变一次背景颜色