我想知道如何使用JavaScript/CSS在物体边缘创建类似"蛇形"的效果。这种效果会在物体周围创造一个不断运动的动画,看起来像是一个在物体边缘上移动的小白色蛞蝓(看起来像是一种发光效果)。
<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; }
}
这可能会有所帮助
下面的代码将在指定的边界内移动一个点。请注意:通过调整相同点的宽度和高度,您可以拥有像蛇一样的生物。请看示例
<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>
这将在指定的边界内移动一个点。请注意:通过调整相同点的宽度和高度,您可以得到类似蛇的生物。
这是对@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; }
}
多条蛇 :-)
创建四个图像,应该比项目略大一点,这样当您查看它时,项目就是具有“蛇形”边框的背景上的前景。
创建一个固定颜色的图像。并使其在边框周围呈“蛇形”。确保它比项目本身稍大。
下一个图像应该是不同的颜色,更浅,以创建发光效果。
下一个图像应该是第一个图像中使用的颜色,但完全相反的方式。第一个图像中的所有山峰都必须成为槽(以使其成为蛇形)。
第四个图像再次与第三个相同,但颜色更浅。
现在,使用JQuery,使用“animate”,更改项目的背景,并在这四个图像之间循环。这会创建一种“发光和爬行”的效果。
您可以将此扩展到超过四个图像,以进一步增强效果。