Gibt es einen Weg, wie ich folgendes tun kann?
Ich habe ein transparentes PNG-Sprite, das auf der linken Seite ein Standardbild und auf der rechten Seite ein Bild für den: Hover-Zustand zeigt.
Gibt es eine Möglichkeit, das Bild vom linken Bild in das rechte Bild überblenden zu lassen: hover nur mit css3-Übergängen? Ich habe Folgendes versucht, aber es funktioniert nicht:
%Vor%Nun wird der Hintergrund animiert, das Bild wird verschoben. Was ich anstelle einer Pfanne haben möchte, ist ein Überblenden- oder Überblendeffekt.
UPDATE: Ich musste zwei Elemente erstellen und die Opazitäten separat animieren. Es ist ein bisschen unordentlich, weil ich die genauen Ränder jedes Elements spezifizieren muss, aber ich denke, dass es funktioniert. Danke für die Hilfe von jedem:)
Sie haben für den tatsächlichen Übergang keinen Code angegeben.
Probieren Sie dies in Ihrem Hover-Stil aus:
%Vor%Ich denke nicht, dass Sie die Deckkraft von nur Hintergrundbildern in CSS ändern können, wenn Sie nicht zwei separate Elemente für das Hintergrundbild haben (eines für jede Position des Sprites) und die Deckkraft der beiden bei Hover ändern Ich glaube du bist festgefahren.
sollte
sein %Vor%bin mir nicht sicher, ob das das Problem behebt oder nicht.
Ich weiß, dass das ein bisschen spät sein kann. Aber ich habe lange mit dem gleichen Problem gekämpft. Auch bei transparenten Sprites scheinen viele Lösungen nicht zu funktionieren.
Was ich getan habe, ist das
HTML
%Vor%CSS
%Vor%Dies ist ein reiner CSS Weg & amp; hat ein bisschen viel Codierung .. aber scheint die einzige Möglichkeit zu sein, die ich den gewünschten Effekt erzielt habe! Hoffe Leute, die auch darüber stolpern, können hier Hilfe finden!
CSS: -
li { Hintergrund: URL ( Ссылка ) nicht wiederholtes linkes Zentrum; Hintergrundgröße: 89px; Auffüllen: 54px 0 54px 130px; Webkit-Übergang: alle 0.5s linear; -moz-Übergang: alle 0.5s linear; -o-Übergang: alle 0.5s linear; Übergang: alle 0.5s linear; }
li: schweben { Hintergrundgröße: 50px }
Tags und Links css image css3 css-transitions fade
