Siehe das folgende Bild:
Sehen Sie diese transparenten Kreise im Hintergrund? Ich möchte sie von unten nach oben animieren und dann manuell (außerhalb des Bildschirms) springen und die Animation neu starten. Die Kreise sind einfache <span> Elemente mit border-radius , um den Kreiseffekt zu erzeugen.
Ist das mit CSS3 möglich, oder brauche ich dafür Javascript? Ich würde auch, wenn es möglich ist, die Kreise während der Bewegung nach oben zufällig innerhalb eines X-Bereichs seitwärts bewegen. Ich würde mir vorstellen, die Zufälligkeit würde Javascript erfordern?
Wenn möglich, würde ich mich über einige Vorschläge / Ideen für die Herstellung freuen. Wenn es mit CSS nicht möglich ist, sind Javascript-Bibliotheken ebenfalls willkommen!
Hier ist eine reine CSS Demonstration (angepasst von diesem Lernprogramm ), das auf der animation -Eigenschaft basiert. Update: Dank TonioElGringo bewegen sich die Bubbles jetzt auch seitwärts, obwohl die Bewegung rhythmisch, nicht zufällig ist :
Ein sehr schönes Arbeitsbeispiel habe ich mit reinem CSS erstellt Ссылка
CSS:
%Vor%Tags und Links html5 css3 css-animations repeat continuous
