Ich habe diese Kreise erstellt, die einen Rahmen erweitern, wenn es einen Mouseover gibt. Das einzige Problem, das ich jetzt bekomme, ist einige Male, dass der Kreis zittern wird. Und es wird deutlicher, wenn ich transition: all .1s ease-in-out; auf mehr als .2s setze.
Gibt es eine Lösung für dieses Problem oder ist das genau so?
Hier ist der Code in JsFiddle
Danke für jede Hilfe!
BEARBEITEN : Ich übertrage die Abmessungen (Breite und Höhe) der Kreise, um die Zentrierung beizubehalten. Ich erkenne, dass dies das Zittern während des Übergangs verursacht. Gibt es eine Arbeit?
Ändern Sie nicht die Breite und die Höhe. Behalten Sie die gleiche Breite und Höhe bei und wechseln Sie einfach den Rand Ihres äußeren Kreises.
Setzen Sie für Ihren inneren Kreis (.circle) einen weißen Rand 12px solid #ffffff. Jetzt ist es immer an der gleichen Stelle relativ zum äußeren Kreis, und jetzt muss es nicht die Größe ändern. Auch der Titel kann nicht herumspringen, weil er immer in der gleichen Position ist.
Stellen Sie für den äußeren Kreis, wenn es nicht schwebt, sicher, dass es die gleiche Größe und den gleichen Rahmen hat wie zuvor, aber machen Sie den Rand weiß, 5px solid #ffffff.
Ich denke, Sie können dann auch viel von Ihrer zusätzlichen Positionierung wegnehmen.
Hier ist ein modifiziertes jsFiddle , so dass Sie einen Blick darauf werfen können, und hier ist das CSS modifiziert:
%Vor%Wenn Sie ein div oder ein p in Ihr a -Tag einfügen, wird das Tag für validiertes XHTML durchbrochen. Vielleicht möchten Sie stattdessen ein div-Element verwenden, bei dem eine Aktion "beim Klicken" hinzugefügt wird, die bewirkt, dass es sich wie ein Link verhält.
Tags und Links html5 css3 css-transitions