Breite des Kreises erweitern

8

Ich bin ziemlich neu in CSS3-Animationen, ich würde gerne wissen, wie Sie das Folgende machen: Ich habe einen Kreis:


Beim Schweben möchte ich die Breite des Kreises erweitern und ihn zu einer Pillenform mit einem Übergang wie in diesem Bild machen:

Das habe ich ausprobiert. Das Problem besteht darin, dass der Kreis bei zunehmender Breite in eine Ellipse übergeht:

%Vor% %Vor%
    
Rowandish 28.04.2015, 15:00
quelle

1 Antwort

21

Sie müssen nur den Wert für den Rahmenradius auf eine andere Einheit als Prozent ändern (alle aufgeführten Einheiten hier ). Für eine Erklärung, wie dies funktioniert und warum Sie diese Einheiten für die gewünschte Ausgabe verwenden müssen, siehe Rand-Radius in Prozent (%) vs. Pixel (px) .

Beispiel mit px. Der Kreis wird bei Hover zu einer Pillenform erweitert :

%Vor% %Vor%

Wenn Sie die Höhe des Kreises nicht kennen, können Sie einen sehr hohen Wert einstellen, so dass der Kreis seine Pillenform bei zunehmender Breite behält:

%Vor% %Vor%
    
web-tiki 28.04.2015, 15:03
quelle

Tags und Links

Django: Verwenden von Annotate, Count und Distinct in einem Queryset Fehler beim Öffnen des Menüs für mobile Netzwerkeinstellungen