Javascript 蛇形移动发光围绕元素

我想知道如何使用javascript/css在对象边缘构建“蛇形”效果

此效果将围绕一个对象创建一个持续不断的动画，该对象看起来像一个在对象边缘移动的微小的白色蛞蝓（看起来像光晕）

---

（一旦我学会了正确的措辞，我将编辑这个问题）

创建四个图像，这些图像应该正好比项目大一点，因此当你看它时，项目是背景上有“蛇形”边框的前景

用固定的颜色创建一个。让边境变得“蛇形”。确保它比物品本身大一点

下一个图像应该是不同的颜色，即更亮，以创建辉光效果

下一个图像应该是第一个图像中使用的颜色，但恰恰相反。第一张图中的所有波峰都必须是波谷（使其弯曲）

第四个图像与第三个图像相同，但颜色较浅

现在，使用JQuery，使用“animate”，并更改项目的背景，并按顺序在这四个图像之间循环。这在某种程度上创造了一种“发光和爬行”的效果

---

您可以将其扩展到四个图像之外，添加更多图像，以进一步增强效果。

这可能会有所帮助

下面的代码在指定的边界内移动一个点。请看：通过调整同一圆点的宽度和高度，你可能会有一个蛇形生物来看看这个圆点

#米德夫{
浮动：左；
宽度：100px；
高度：100px；
背景：rgb（0,0,0）；
}
#顶底{
浮动：左；
宽度：110px；
高度：5px；
背景：红色；
位置：相对位置；
}
#左div，#右div{
宽度：5px；
浮动：左；
高度：100px；
背景：蓝色；
位置：相对位置；
}
#紧身衣{
宽度：120px；
高度：120px；
}
#中心驾驶员{
浮动：左；
}
.动画对象{
z指数：2；
背景：白色；
}
$（文档）.ready（函数（）{
$（“#topDiv”）。在（“animplete”，function（）上{
$（“.animateObject”）.remove（）；
var div=document.createElement（“div”）；
元（div）、宽（5）、高（5）；
div.className=“animateObject”；
$（“#rightDiv”）。追加（div）；
$（div.css（{position:“absolute”}）；
$（div）。设置动画({
排名：100
},
2000年，职能（）{
$（“#rightDiv”）.trigger（{type:“animplete”，time:newdate（）}）；
});
});
$（“#rightDiv”）。在（“animplete”，function（）上{
$（“.animateObject”）.remove（）；
var div=document.createElement（“div”）；
元（div）、宽（5）、高（5）；
div.className=“animateObject”；
$（“#bottomDiv”）。追加（div）；
$（div）.css（{位置：“绝对”，右：0}）；
$（div）。设置动画({
右：100
},
2000年，职能（）{
$（“#bottomDiv”）.trigger（{type:“animplete”，time:newdate（）}）；
});
});
$（“#bottomDiv”）。在（“animplete”，function（）上{
$（“.animateObject”）.remove（）；
var div=document.createElement（“div”）；
元（div）、宽（5）、高（5）；
div.className=“animateObject”；
$（“#leftDiv”）。追加（div）；
$（div）.css（{位置：“绝对”，底部：-5}）；
$（div）。设置动画({
底数：100
},
2000年，职能（）{
$（“#leftDiv”）.trigger（{type:“animplete”，time:new Date（）}）；
});
});
$（“#leftDiv”）。在（“animplete”，function（）上{
$（“.animateObject”）.remove（）；
var div=document.createElement（“div”）；
元（div）、宽（5）、高（5）；
div.className=“animateObject”；
$（“#topDiv”）。追加（div）；
$（div）.css（{位置：“绝对”，左：0}）；
$（div）。设置动画({
左：105
},
2000年，职能（）{
$（“#topDiv”）.trigger（{type:“animplete”，time:newdate（）}）；
});
});
$（“#topDiv”）.trigger（{type:“animplete”，time:newdate（）}）；
});

---

这将在指定边界内移动点。请看：通过调整同一点的宽度和高度，在javascript/css3 Animation上快速搜索后，您可能会得到一个蛇形生物

看看这个

上一个关于stackoverflow的问题涉及边界发光效应

您还可以使用javascript动画库，如createjs。

---

我有一个小型的CSS3版本：

一个小容器和一条蛇：

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

---

这里是对@Starx answer的改进。我已经使

#snake

维度独立，并使用长方体阴影为其提供了发光效果

---

：-）

听起来是个很酷的挑战哦，我真的很想找到一个答案，因为我一直在想。一部永远都不会上映的动画很容易，难的是让它上映；）一些启示：，对这个问题投7票？Srsly？+1漂亮而简单。该演示没有特定于浏览器的标记，因此可能无法在所有浏览器中运行（例如safari）@dc5，是的，比其他建议的解决方案简单得多。我很懒

<div id="cont"></div>
<div class="snake"></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; }
}