Snake-like Moving Glow围绕一个元素

Question

我想知道如何使用javascript/css在对象的边缘周围构建"蛇状"效果.

这个效果会在一个物体周围创造一个永远的动画,看起来像一个在物体边缘移动的小白色slu((看起来像一个发光)

(一旦我学会了正确的措辞,我会编辑这个问题)

Answer 1

我有一个小的CSS3版本:

一个小容器和我们的蛇:

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

这是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; }
}

[演示]