0
Ich habe ein Bild. Wie erstellt man die Animation Frame-für-Frame-Darstellung des Ticks?Wie erstellt man Animation Frame-by-Frame-Darstellung des Ticks
Wie kann ich das tun?
A
Antwort
0
Sie können CSS-Animationen verwenden, um das Hintergrundbild in verschiedenen Schritten zu verschieben oder zu ersetzen.
Aber ich würde dieses Beispiel nicht Frame für Frame machen. Es wäre besser, das Häkchen in ein separates Bild zu setzen und die Breite zu animieren. Entweder mit CSS-Animation oder Übergang, hängt von der Situation ab.
Hier ist ein Beispiel mit Ihrem Bild, ohne separates Bild für das Häkchen. Leider hat Ihr Bild keinen leeren Zustand des Kreises.
.foo1, .foo2 {
width: 100px;
height: 100px;
transition: .5s all ease;
background-image: url('http://i.stack.imgur.com/gzzRl.png');
position: absolute;
}
.container {
position: relative;
}
.foo2 {
background-position: -202px 0;
width: 0;
}
.container:hover .foo2 {
width: 100px;
}<div class="container">
<div class="foo1">
</div>
<div class="foo2">
</div>
</div>Verwandte Themen
- 1. Wie erstellt man eine Animation wie diese?
- 2. Wie erstellt man eine UIView Bounce-Animation?
- 3. Wie erstellt man eine mehrstufige UIImageView Animation?
- 4. Wie erstellt man eine Animation zum Seitenaufwölben?
- 5. Wie man eine bestimmte Animation erstellt
- 6. Wie man einfache Animation des Logos
- 7. Wie erstellt man On/Off-Animation wie in Time Machine?
- 8. Wie erstellt man Animation wie Path Application in Android
- 9. Wie erstellt man Cross (rechts oben) Animation mit CSS?
- 10. Wie erstellt man eine atomartige Animation mit CSS3-Animationen?
- 11. Wie erstellt man eine pulsierende Glow-Ring-Animation in CSS?
- 12. Wie erstellt man eine Hover-Animation mit product.images in Rails?
- 13. Wie erstellt man eine Folienlayout-Animation in Android?
- 14. Zweck des Ticks (Apostroph) in F # -Wertnamen?
- 15. Wie erstellt man zirkuläre Animation mit Text in der Mitte des Kreises in reinem CSS?
- 16. Wie funktionieren php's (ticks) wirklich?
- 17. Wie man Animation stoppt?
- 18. Wie man Animation glatt macht
- 19. Wie erstellt man ähnliche Animationen von Google?
- 20. Wie erstellt man den Explosionseffekt der UIView?
- 21. Wie man Bild drehen (Animation)
- 22. Wie man "Schütteln" Animation macht
- 23. wie man die numerischen Ticks auf Achsen verkürzt
- 24. Wie man kleine Ticks auf die Symlog-Skala legt?
- 25. Wie konvertiert man 10ms Ticks-Wert in Sekunden mit Java?
- 26. Wie man Ticks Schriftgröße eines Diagramms ändert mit PyQtgraph
- 27. Wie konvertiert man die Datetime-Zeichenfolge in Ticks
- 28. Wie konvertiert man Ticks in eine lesbare Datetime mit XSLT?
- 29. Wie ändert man die Etiketten auf einem KendoUI Slider Ticks?
- 30. Customize X-Achsen-Ticks