Reiner CSS-Code zum Erzielen von Fluss und dynamischen Linieneffekten

Ideen:
Eine äußere Box legt den Hintergrund fest; eine innere Box legt die Breite und Höhe des Hintergrunds fest und legt eine Animation fest, um die Box zu bewegen.

Demo:

CSS-Teil:

@keyframes meineBewegung {
  von{left:0px;}
  zu {left:70px;}
}
.Vater{
Hintergrund: #748096;
Rahmenradius: 5px;
Position: relativ;
oben: 70px;
links: -5px;
}

.moveson {
Breite: 20px;
Höhe: 8px;
Hintergrund: #a0e80c;
Rahmenradius: 5px;
Animation: meine Bewegung, 2 s, linear, unendlich;
Position: relativ;
}

HTML-Teil:

<div Klasse="Vater">
     <div Klasse="moveson"></div>
</ediv>

Zusammenfassen

Damit ist dieser Artikel über die Verwendung von reinem CSS zum Erzielen von fließenden und dynamischen Linieneffekten abgeschlossen. Weitere Informationen zur Verwendung von CSS zum Erzielen von fließenden und dynamischen Linieneffekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!