Вопрос по css – Цвет фона кнопки css3 бесконечный переход

17

Есть ли способ сделать цвет фона кнопки с серого на синий, а затем обратно серым, используя только css3? Хороший пример кнопки действия по умолчанию - какао? Я знаю, что это может быть сделано в javascript, но я бы предпочел использовать только css для этого.

Ваш Ответ

2   ответа
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;  
}
Это не то, что он просил
Можете ли вы предоставить попер-код этого вопроса и одну демонстрационную ссылку
Узнайте код вашего желания в редакции.
Привет @Tooraj это hover свойства, но я думаю, что вопрос в том, что автоматическое изменение цвета .btn
Спасибо за внимание. Я перейду к следующему изданию.
35

я сделал кнопку через 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/

Похожие вопросы