Dies ist meine erste Post. Meine Frage ist einfach: Auf die gleiche Weise, wie Sie ein Zahnrad leicht animieren können, indem Sie den entsprechenden Code in seiner Klasse hinzufügen, gibt es eine einfache Möglichkeit, Batteriesymbole von leer bis voll zu animieren?Animieren der Schriftart Awesome Batterie-Symbol
Sie können fa-stack verwenden, um zwei font-awesome Symbole zu überlappen. Dafür müssen Sie manuell eine Animation erstellen. Für animierte Batterie können Sie dies versuchen,
<span class="battery">
<i class="fa fa-battery-empty"></i>
<i class="fa fa-battery-4 animate"></i>
</span>
und einige Arten,
.battery{
display: inline-block;
position:relative;
color:#444;
}
.battery .animate{
width:0%;
position:absolute;
left: 0;
top:3px;
overflow: hidden;
color:#27ae60;
z-index: -1;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
transition:all 0.5s ease;
}
.battery:hover .animate{
width:100%;
}
Hier ist die Demo, http://jsbin.com/foruyez/edit?html,css,output
Dank!
Danke lokesh. Nicht genau das, was ich mir erhofft habe, aber es könnte trotzdem nützlich sein. – Gef
Ich bin überrascht, dass meine Post eine -1 erhielt. Was ist nicht klar in meinem Beitrag? Es ist eine ziemlich einfache Frage: Klassencodes erlauben es, einige Icons zu animieren. Ich fragte mich, ob Batteriesymbole durch einen Klassencode selbst animiert werden könnten. Es scheint die Antwort ist nein. Danke an Lokesh, der sich Zeit genommen hat, eine Alternative vorzuschlagen. – Gef