Frage an css-animations, css-transitions, css – css3 schaltfläche hintergrundfarbe unendlicher übergang

17

Gibt es eine Möglichkeit, die Hintergrundfarbe einer Schaltfläche mit nur CSS3 von Grau zu Blau und dann wieder zu Grau zu ändern? Ein gutes Beispiel ist eine Standardaktionsschaltfläche ist Kakao? Ich weiß, dass dies in Javascript gemacht werden kann, aber ich würde lieber nur CSS dafür verwenden.

Deine Antwort

2   die antwort
35

Hallo, ich habe den Button durch CSS3 Animation gemacht, bitte schauen Sie, ich hoffe, es ist in der Nähe Ihrer Frage: -

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

siehe die Demo: -http://jsbin.com/osohak/7/edit

Lesen Sie mehr über CSS3 Transitions & Animationhttp://css3.bradshawenterprises.com/cfimg/

5

Wenn Sie eine Überblendanimation benötigenhover oder solche Dinge,CSS3-Übergangseigenschaft ist Ihre Lösung.

BEARBEITEN:

.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;  
}
Das ist nicht das, wonach er gefragt hat Xsmael
Vielen Dank dass Sie darüber nachdenken. Ich werde für die nächste Ausgabe gehen. Tooraj Jam
Können Sie Poper-Code für diese Frage und einen Demo-Link bereitstellen? Rohit Azad
Finden Sie Ihren Wunschcode bei edition heraus. Tooraj Jam
Hallo @Tooraj es schweben Eigenschaften, aber ich denke, Frage ist, dass die automatische Änderung der Farbe von .btn Rohit Azad

Verwandte Fragen