一个元素周围类似蛇形运动的发光效果

Question

一个元素周围类似蛇形运动的发光效果

javascripthtmlcss

9

我想知道如何使用JavaScript/CSS在物体边缘创建类似"蛇形"的效果。这种效果会在物体周围创造一个不断运动的动画，看起来像是一个在物体边缘上移动的小白色蛞蝓（看起来像是一种发光效果）。

- Dan Benjamin

2

一些灵感：行进的蚂蚁1，行进的蚂蚁2 - dc5

5个回答

3

这可能会有所帮助

下面的代码将在指定的边界内移动一个点。请注意：通过调整相同点的宽度和高度，您可以拥有像蛇一样的生物。请看示例

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

这将在指定的边界内移动一个点。请注意：通过调整相同点的宽度和高度，您可以得到类似蛇的生物。

- Akshay Khandelwal

2

这是对@Starx答案的改进。我已经使#snake不依赖于尺寸，并使用了box-shadow效果来使其发光。演示

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

多条蛇 :-)

- Bergi

1

Hay在快速谷歌了解了javascript/css3动画之后，请看一下这个演示。

这个之前在stackoverflow上的问题涉及到边框发光效果。 https://dev59.com/AWUp5IYBdhLWcg3w1qMi 这里。

你还可以使用像createjs这样的javascript动画库。 http://www.createjs.com/#!/TweenJS。

- James Nicholson

0

创建四个图像，应该比项目略大一点，这样当您查看它时，项目就是具有“蛇形”边框的背景上的前景。

创建一个固定颜色的图像。并使其在边框周围呈“蛇形”。确保它比项目本身稍大。

下一个图像应该是不同的颜色，更浅，以创建发光效果。

下一个图像应该是第一个图像中使用的颜色，但完全相反的方式。第一个图像中的所有山峰都必须成为槽（以使其成为蛇形）。

第四个图像再次与第三个相同，但颜色更浅。

现在，使用JQuery，使用“animate”，更改项目的背景，并在这四个图像之间循环。这会创建一种“发光和爬行”的效果。

您可以将此扩展到超过四个图像，以进一步增强效果。

- Sasanka Panguluri

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Starx · Accepted Answer

我有一个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; }
}

[演示]