我想知道如何使用javascript / css在对象的边缘周围构建“蛇状”效果。
此效果将围绕一个物体创建一个永远的动画,该物体看起来像一个在物体边缘移动的小白色slu((看起来像一个发光)
(一旦我学会了正确的措辞,我会编辑这个问题)
答案 0 :(得分:7)
我有一个小的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; }
}
答案 1 :(得分:3)
可能这可能会有所帮助
下面的代码在指定的边框内移动一个点。请参阅:通过调整同一个点的宽度和高度,你可能有一个像生物一样的蛇看看Fiddle
<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>
这会在指定的边框内移动一个点。请参阅:通过调整同一个点的宽度和高度,你可能有一个像生物一样的蛇
答案 2 :(得分:2)
这是@Starx答案的改进。我已经使#snake
维度无关,并使用box-shadow给它一个发光效果。 Demo
<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; }
}
Multiple snakes: - )
答案 3 :(得分:1)
在快速谷歌javascript / css3动画后干草。
查看此demo
有关stackoverflow的上一个问题涉及边框发光效果。
https://stackoverflow.com/questions/15008931/animated-glowing-border-using-css-js link
您还可以使用javascript动画库,例如createjs。 http://www.createjs.com/#!/TweenJS
答案 4 :(得分:0)
创建四个图像,这些图像应该比项目大一点,所以当你看它时,该项目是背景上具有“蛇形”边框的前景。
使用固定颜色创建一个。并使它在边界周围“蛇形”。确保它比项目本身大一点。
下一个图像应该是不同的颜色,更轻,以创建发光效果。
下一张图像应该是第一张图片中使用的颜色,但完全相反。第一张图片中的所有徽章都必须在这里成为低谷(为了让它变成蛇形)。
第四张图像与第三张图像相同,但颜色较浅。
现在,使用JQuery,使用“animate”,并更改项目的背景,并按顺序在这四个图像之间循环。这会产生一些“发光和爬行”的效果。
您可以将其扩展到四个图像之外,添加更多图像,以进一步提高效果。