Ich versuche das schon seit Stunden, aber bisher bin ich nicht weitergekommen.
Ich habe eine Website mit ein paar Animationen, einige werden beim Klicken und andere beim Hover aktiviert. etwas Ähnliches wie die Animation auf dieser Website: http://www.pixelwrapped.com/ Der Katzenschwanz reagiert, wenn Sie den Browser skalieren, skaliert er auch mit.
Dies ist der Code, den ich verwende, um die Animation zu erstellen
.monster {
position: absolute;
width: 100px;
height: 100px;
margin: 2% auto;
background: url('img/le-cloud.png') left center;
overflow: auto;
display: block;
left: 20%;
top: 40%;
}
.monster:hover {
position: absolute;
width: 100px;
height: 100px;
margin: 2% auto;
background: url('img/le-cloud.png') left center;
animation: play .9s steps(18);
overflow: auto;
display: block;
left: 20%;
top: 40%;
}
Ich habe dieses Tutorial gefunden , das Prozentsätze verwendet, das funktioniert, um 1 Frame zu ändern und nicht die gesamten 18 Frames in diesem Beispiel abzuspielen. Ich habe andere Animationen, die aus mehr als 30 Sprites bestehen. Ich habe mir spritely.js angesehen, aber es reagierte nicht.
Irgendwelche Ideen, wie ich das lösen kann?
Irgendwann habe ich herausgefunden, wie es geht! Nur für den Fall, dass es noch jemanden interessiert, lassen Sie mich etwas erklären, damit Sie nicht das durchmachen, was ich durchgemacht habe:
<style>
div.sprite {
margin: 0 auto;
width: 40%;
/* Change this to what ever value you desire*/
height: 0;
padding-bottom: 40%;
background-image: url("le-cloud-copy.png");
/* Add the sprite sheet here, must be on a staright line*/
background-position: 0 0;
background-size: 1800%;
/* I have 18 sprites in the sheet thus it's 1800%, if it was 4 you'd use 400% and so on*/
display: block;
}
div.sprite:hover {
/* background-position: 500% 0;*/
animation: play .9s steps(18);
/* 18 steps to go over al the sprites i have, if you had 4 in the sprite the value would be 4 for example */
}
@keyframes play {
100% {
background-position: 1800% 0;
}
}
</style>
Und das Wunderbare daran ist , diese Bibliothek einzuschließen, und das sollte funktionieren.
<script src="js/prefixfree.min.js"></script>
Versuchen Sie es mit Transformationen scale
und allen Haltepunkten, die Sie benötigen. Es wird in IE9 und höher unterstützt, aber Sie können in IE < 9 emuliert werden, indem Sie das zoom
Eigentum von Microsoft verwenden. Andere sind (nicht ohne weiteres) mit dem MS-Matrix-Filter möglich.
@media(max-width:1024px){
.monster {
transform:scale(0.5);
}
}
scale
für responsives Design ist eine schlechte Praxis.scale()
für Bilder ist in Ordnung, solange 1) der Skalenwert kleiner als 1 ist (mehr als 1 ist immer unscharf), 2) das Bild absolut positioniert ist (so dass der Unterschied in Begrenzungsrahmen und visuellem Erscheinungsbild spielt keine Rolle), 3) die Leistung spielt keine große Rolle (es wäre am besten, ein kleineres Bild zu laden, wenn nur ein kleineres Bild benötigt wird) und 4) wenn es mit anderen Transformationen gepaart wird, muss es stark sein getestet, da Browser Probleme mit bestimmten Arten von Transformationen haben, insbesondere wenn sie miteinander gepaart sind
Vinzenz
Joonas
Nur
Joonas
Nur
Nur
Vinzenz
Nur
Zach Saucier
:hover
Zustand wiederholen. Sie müssen nur diejenigen haben, die Sie vom Anfangszustand ändernLuciano
Cai