2013-08-17 7 views
8

Ich frage mich, wie können Sie einen "schlangenartigen" Effekt um den Rand eines Objekts mit Javascript/CSS erstellen.Snake-Like Moving Glow um ein Element

Dieser Effekt wird eine immer gehen Animation um ein Objekt erstellen, die sich wie eine winzige weiße Schnecke bewegt auf dem Rand des Objekts (sah aus wie ein Schein) sieht

(Wird einmal diese Frage bearbeite ich die richtige Phrasierung lernen)

+2

Klingt wie eine coole Herausforderung –

+0

Wow, ich will eigentlich wirklich eine Antwort für diese finden, weil ich das schon immer gefragt habe. –

+3

Eine "nie gehende Animation" ist einfach, der schwierige Teil ist, sie zum Laufen zu bringen;) – dc5

Antwort

7

Ich habe eine kleine CSS3-Version dieses:

Einen kleinen Behälter und eine unsere Schlange:

<div id="cont"></div> 
<div class="snake"></div> 

Und hier ist der CSS Magic:

#cont { 
    width: 150px; 
    height: 150px; 
    background: #000; 
    margin: 10px; 
} 
.snake { 
    width: 5px; 
    height: 5px;   
    background: #f00; 
    position: absolute; 
    top: 5px; 
    left: 15px; 
    animation: around 5s infinite; 
} 
@keyframes around 
{ 
    0% { left: 15px; top: 5px; } 
    25% { left: 165px; top: 5px; } 
    50% { top: 160px; left: 165px; } 
    75% { left: 15px; top: 160px; } 
    100% { top: 5px; left: 15px; } 
} 

[Demo]

+0

+1 schön und einfach. Die Demo hat keine browserspezifischen Tags, so scheint es, dass sie nicht in allen Browsern funktionieren (Safari zum Beispiel) – dc5

+0

@ dc5, Ja viel einfacher als andere vorgeschlagene Lösungen. Ich war dann faul, browserspezifische Tags hinzuzufügen, aber seitdem ist es eine +1 Antwort. Ich sollte das ehren. – Starx

+1

[verbesserte Version] (http://jsfiddle.net/Ly7DU/3/) mit linearer Bewegung .-) – Bergi

0

Erstellen Sie vier Bilder, die genau ein bisschen größer als das Objekt sein sollten, also wenn Sie es betrachten, ist das Element der Vordergrund auf einem Hintergrund, der "snaky" Grenzen hat.

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 des ersten Bildes sein, aber genau umgekehrt. Alle Kämme im ersten Bild müssen hier Tröge sein (um es schlangenartig zu machen).

Das vierte Bild ist wieder dasselbe wie das dritte, aber mit einer helleren Farbe.

Verwenden Sie nun JQuery, "animieren", und ändern Sie den Hintergrund des Elements und Zyklus zwischen diesen vier Bildern in dieser Reihenfolge. Dies erzeugt etwas "Glühen und Kriechen" -Effekt.

Sie können dies über vier Bilder hinaus erweitern, weitere hinzufügen, um die Effekte zu fördern.

3

Wahrscheinlich könnte dies

Der Code hilft unten bewegt einen Punkt innerhalb der festgelegten Grenzen. Bitte beachten Sie: dass durch die Breite und Höhe des gleichen Punkt stellen Sie eine Schlange wie Kreatur am Fiddle

<html> 
<head> 
    <style> 
     #midDiv{ 
      float:left; 
      width: 100px; 
      height: 100px; 
      background:rgb(0,0,0); 
     } 
     #topDiv,#bottomDiv{ 
      float:left; 
      width: 110px; 
      height:5px; 
      background: red; 
      position:relative; 
     } 
     #leftDiv, #rightDiv{ 
      width:5px; 
      float:left; 
      height: 100px; 
      background: blue; 
      position:relative; 
     } 
     #bodyWrapper{ 
      width: 120px; 
      height: 120px; 
     } 
     #centerDiv{ 
      float:left; 
     } 
     .animateObject{ 
      z-index:2; 
      background: white; 
     } 
    </style> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     $(document).ready(function(){ 
      $("#topDiv").on("animcomplete", function(){ 
       $(".animateObject").remove(); 
       var div = document.createElement("div"); 
       $(div).width(5).height(5); 
       div.className = "animateObject"; 
       $("#rightDiv").append(div); 
       $(div).css({position: "absolute"}); 
       $(div).animate({ 
        top: 100 
       }, 
       2000, function(){ 
        $("#rightDiv").trigger({type: "animcomplete", time: new Date() }); 
       }); 
      }); 
      $("#rightDiv").on("animcomplete", function(){ 
       $(".animateObject").remove(); 
       var div = document.createElement("div"); 
       $(div).width(5).height(5); 
       div.className = "animateObject"; 
       $("#bottomDiv").append(div); 
       $(div).css({position: "absolute", right: 0}); 
       $(div).animate({ 
        right: 100 
       }, 
       2000, function(){ 
        $("#bottomDiv").trigger({type: "animcomplete", time: new Date() }); 
       }); 
      }); 
      $("#bottomDiv").on("animcomplete", function(){ 
       $(".animateObject").remove(); 
       var div = document.createElement("div"); 
       $(div).width(5).height(5); 
       div.className = "animateObject"; 
       $("#leftDiv").append(div); 
       $(div).css({position: "absolute", bottom: -5}); 
       $(div).animate({ 
        bottom: 100 
       }, 
       2000, function(){ 
        $("#leftDiv").trigger({type: "animcomplete", time: new Date() }); 
       }); 
      }); 
      $("#leftDiv").on("animcomplete", function(){ 
       $(".animateObject").remove(); 
       var div = document.createElement("div"); 
       $(div).width(5).height(5); 
       div.className = "animateObject"; 
       $("#topDiv").append(div); 
       $(div).css({position: "absolute", left: 0}); 
       $(div).animate({ 
        left: 105 
       }, 
       2000, function(){ 
        $("#topDiv").trigger({type: "animcomplete", time: new Date() }); 
       }); 
      }); 
      $("#topDiv").trigger({type: "animcomplete", time: new Date() }); 

     }); 
    </script> 
</head> 
<body> 
    <div id="bodyWrapper"> 
     <div id="topDiv"></div> 
     <div id="centerDiv"> 
      <div id="leftDiv"></div> 
      <div id="midDiv"></div> 
      <div id="rightDiv"></div> 
     </div> 
     <div id="bottomDiv"></div> 

    </div> 
</body> 

Dies bewegt einen Punkt innerhalb der festgelegten Grenzen Werfen Sie einen Blick haben. Bitte beachten Sie, dass durch die Anpassung der Breite und Höhe des gleichen Punktes eine schlangenähnliche Kreatur entstehen kann.

2

Hier ist ein Kobold Rovement auf @Starx Antwort. Ich habe die #snake dimensionsunabhängig gemacht und mit Box-Shadow einen Glow-Effekt erzeugt. Demo

<div id="cont"> 
    <div class="snake"></div> 
</div> 
#cont { 
    /* some dimensions */ 
    position: relative; 
} 
.snake { 
    position: absolute; 
    z-index: -1; 
    width: 0px; 
    height: 0px; 
    background: #f00; 
    border-radius: 5px; 
    box-shadow: 0px 0px 15px 15px red; 
    animation: around 4s linear infinite, 
       glow .7s alternate-reverse ease-in-out infinite; 
} 
@keyframes around { 
    0% { left: 0; top: 0; } 
    25% { left: 100%; top:0; } 
    50% { left: 100%; top: 100%; } 
    75% { left: 0; top: 100%; } 
    100% { left: 0; top: 0; } 
} 
@keyframes glow { 
    0% { opacity: .2; } 
    100% { opacity: 1; } 
} 

Multiple snakes :-)

+0

Interessant ... Glühender Schlangenkopf :) +1 – Starx