8

javascript/css を使用して、オブジェクトの縁の周りに「ヘビのような」効果をどのように構築できるのか疑問に思っています。

この効果は、オブジェクトの縁を移動する小さな白いナメクジのように見えるオブジェクトの周りに常にアニメーションを作成します (グローのように見えます)。

（正しい言い回しを学んだら、この質問を編集します）

4

5 に答える 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>

これは、指定された境界線内でドットを移動します。見てください：同じドットの幅と高さを調整することで、ヘビのような生き物を作ることができます

于 2013-08-17T15:53:25.130 に答える
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; }
}

複数のヘビ:-)

于 2013-08-17T18:01:32.937 に答える
0

4 つの画像を作成します。この画像はアイテムよりも少し大きくする必要があります。そのため、アイテムを見ると、「蛇行した」境界線を持つ背景の前景にアイテムが表示されます。

固定色で作成します。そして、国境の周りを「蛇行」させます。アイテム自体よりも少し大きいことを確認してください。

次の画像は、グロー効果を作成するために、別の色、つまり明るい色にする必要があります。

次の画像は、最初の画像で使用した色にする必要がありますが、まったく逆の方法です。最初の画像のすべての山は、ここでは谷でなければなりません (蛇行させるため)。

4 番目の画像も 3 番目と同じですが、色が明るいです。

ここで、JQuery を使用して「animate」を使用し、アイテムの背景を変更して、これら 4 つの画像をこの順序で循環させます。これにより、「グロー アンド クロール」効果がいくらか作成されます。

これを 4 つの画像を超えて拡張したり、さらに追加したりして、効果をさらに高めることができます。

于 2013-08-17T15:30:20.553 に答える