Ich habe diesen Artikel Ссылка
gesehenIch möchte das in meinem WP-Blog hinzufügen. Damit jedes neue Postdiv diese Animation an seinem Rand hat. Aber das Problem ist, dass es in SVG ist. Ist es überhaupt möglich, dass ich diese Animation ohne SVG verwenden kann und auch nicht Javascript verwenden möchte.
Sagen wir, Code ist:
Dies ist mit CSS möglich, und es ist ziemlich einfach, wenn Sie mehrere Hintergründe verwenden und ihre Positionen mit Animationen ändern.
Hier ist ein Beispiel mit fortlaufender Bewegung der Ränder direkt von der Seitenladung.
Dankeschön an web-tiki , um die leichte Verzerrung zu beheben, die ursprünglich am Ende jeder Version vorhanden war Schleife der Animation.
Mit reinem CSS können Sie repeating-linear-gradient zum Zeichnen verwenden die Punkte im Hintergrund, legen Sie die transition fest und bewegen Sie den Mauszeiger über den Hintergrund.
Beispiel css code:
%Vor%Demo:
Dies ist nur ein kurzes Beispiel, aber es verwendet Pseudoeffekte, um den Rand bei einem Hover "zu bewegen" (Hinweis: Keyframes wären vorteilhafter, wenn Sie den Effekt "fortsetzen" wollen)
Dies könnte Ihnen besser gefallen, da die Animation auch einfacher fortgesetzt werden könnte:
Dieser Code wurde aus der Antwort von @Harry abgeleitet, die als Antwort auf die Frage von @dude geändert wurde und für ein div mit beliebiger Breite und Höhe funktioniert.
Tags und Links javascript html jquery css css3