Pytanie w sprawie css-transitions, css, css-animations – css3 przycisk koloru tła nieskończone przejście

17

Czy istnieje sposób, aby kolor tła przycisku zmieniał się z szarego na niebieski, a następnie z powrotem na szary, używając tylko css3? Dobrym przykładem jest domyślny przycisk akcji to kakao? Wiem, że można to zrobić w javascript, ale wolę używać do tego tylko css.

Twoja odpowiedź

2   odpowiedź
5

Jeśli potrzebujesz włączyć animacjęhover lub takie rzeczy,Właściwość przejścia CSS3 to twoje rozwiązanie.

EDYTOWAĆ:

.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;  
}
Znajdź kod pożądania w edycji. Tooraj Jam
Nie o to prosił Xsmael
Dzięki za uwagę. Pójdę na następne wydanie. Tooraj Jam
Czy możesz podać kod poper tego pytania i jeden link demonstracyjny Rohit Azad
Cześć @ Tooraj to hover Properties, ale myślę, że pytanie to automatyczna zmiana na kolor .btn Rohit Azad
35

Cześć, zrobiłem przycisk poprzez animację CSS3, popatrz, mam nadzieję, że jest blisko twojego pytania: -

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

zobacz demo: -http://jsbin.com/osohak/7/edit

przeczytaj więcej o CSS3 Transitions & Animationhttp://css3.bradshawenterprises.com/cfimg/

Powiązane pytania