1. 首頁
  2. 問答
  3. 元素周圍的蛇狀移動輝光

元素周圍的蛇狀移動輝光

2013-08-17 30 views
8

我想知道如何在圍繞使用javascript/css的對象邊緣創建「蛇狀」效果。元素周圍的蛇狀移動輝光

這種影響將創建一個圍繞一個對象，它看起來像一個微小的白色蛞蝓物體的邊緣移動的以往任何時候都動畫（看上去像一個發光）

（編輯該問題一旦我學會了正確的措辭）

來源

2013-08-17 Dan Benjamin

+2

聽起來像一個很酷的挑戰 –

+0

哇，我居然真的想找到一個答案，因爲我一直想知道這一點。 –

+3

一個'永不動畫'很容易，難的部分是讓它走;） – dc5

回答

7

我有這個小CSS3版本：

一個小容器和我們的蛇：

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

這裏是CSS魔法：

#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]

來源

2013-08-17 17:08:52 Starx

+0

+1不錯，簡單。該演示沒有瀏覽器特定標籤，因此可能看起來不適用於所有瀏覽器（例如safari） – dc5

+0

@ dc5，比其他解決方案簡單得多。我很懶，然後添加瀏覽器特定的標籤，但現在它的答案是+1。我應該尊重這一點。 – Starx

+1

[改進版本]（http://jsfiddle.net/Ly7DU/3/）帶有線性移動.-） – Bergi

0

創建四個圖像，應該比這個項目大一點，所以當你看它時，這個項目是背景上具有「蛇形」邊界的前景。

用固定的顏色創建一個。並且讓它在邊界附近「蛇行」。確保它比項目本身大一點。

下一張圖像應該是不同的顏色，即更亮，以創建發光效果。

下一張圖片應該是第一張圖片中使用的顏色，但方式完全相反。第一幅圖像中的所有波峯必須在這裏出現波谷（使其變得蛇行）。

第四張圖像再次與第三張圖像相同，但顏色較淺。

現在，使用JQuery，使用「animate」，並更改項目的背景，並按順序在這四個圖像之間循環。這創造了一些「發光和爬行」效果。

您可以將此擴展到四幅圖像之外，添加更多以進一步增強效果。

來源

2013-08-17 15:30:20

3

也許這可能有幫助

下面的代碼在指定邊框內移動一個點。請參閱：通過調整相同點的寬度和高度，你可以有一個像動物蛇有一個看看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>

這指定的邊界內移動的點。請參閱：通過調整相同點的寬度和高度，您可能會有一條像生物一樣的蛇

來源

2013-08-17 15:53:25

2

這是一個imp在@Starx上回答問題。我已經制作了與尺寸無關的#snake，並給它帶來了陰影效果。 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 :-)

來源

2013-08-17 18:01:32 Bergi

+0

有趣的......發光的蛇頭:) +1 – Starx

相關問題

 相關問題