Ich frage mich, wie Sie mit JavaScript / CSS einen "schlangenähnlichen" Effekt um den Rand eines Objekts herum aufbauen können.
Dieser Effekt erzeugt eine fortlaufende Animation um ein Objekt herum, das aussieht wie ein kleiner weißer Stein, der sich auf dem Rand des Objekts bewegt (sieht aus wie ein Glühen).
(Bearbeite diese Frage, sobald ich die richtige Formulierung gelernt habe)
Wahrscheinlich könnte das helfen
Der folgende Code bewegt einen Punkt innerhalb der angegebenen Grenzen. Bitte beachten Sie, dass Sie, wenn Sie die Breite und Höhe des gleichen Punktes anpassen, eine schlangenähnliche Kreatur haben. Schauen Sie sich die Fiddle an
%Vor%
Dies bewegt einen Punkt innerhalb der angegebenen Grenzen. Bitte beachten Sie, dass Sie, wenn Sie die Breite und Höhe des gleichen Punktes anpassen, eine schlangenähnliche Kreatur haben können
Hier ist eine Verbesserung der Antwort von @Starx. Ich habe die #snake dimensionsunabhängig gemacht und sie mit Box-Shadow versehen. Demo
Mehrere Schlangen : -)
Erstellen Sie vier Bilder, die genau ein bisschen größer sein sollten als das Objekt. Wenn Sie es also betrachten, ist das Objekt der Vordergrund auf einem Hintergrund mit "schlangenartigen" Rändern.
Erstellen Sie einen mit einer festen Farbe. Und mach es "snaky" um die Grenzen herum. Stellen Sie sicher, dass es ein bisschen größer ist als das Objekt selbst.
Das nächste Bild sollte eine andere Farbe haben, die heller ist, um einen Leuchteffekt zu erzeugen.
Das nächste Bild sollte die Farbe sein, die im ersten Bild verwendet wird, aber genau umgekehrt. Alle Wappen im ersten Bild müssen Tröge sein (um es schlangenartig zu machen).
Das vierte Bild ist wieder dasselbe wie das dritte, aber mit einer helleren Farbe.
Verwenden Sie jetzt JQuery, verwenden Sie "animate", und ändern Sie den Hintergrund des Objekts und wechseln Sie zwischen diesen vier Bildern in dieser Reihenfolge. Dies erzeugt etwas einen "Glühen und Kriechen" Effekt.
Sie können dies über vier Bilder hinaus erweitern und weitere hinzufügen, um die Effekte zu verstärken.
Tags und Links javascript html css