Question

有没有办法让按钮的背景颜色从灰色变为蓝色，然后仅使用css3变回灰色？一个很好的例子是默认操作按钮是可可吗？我知道这可以在javascript中完成，但我宁愿只使用css。

Answer 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 Transitions＆amp;动画http://css3.bradshawenterprises.com/cfimg/

Answer 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;  
}

css3按钮背景颜色无限过渡

2 个答案: