元素周围的蛇形移动发光
Snake-Like Moving Glow around an element
我想知道如何使用javascript/css在对象边缘构建"蛇形"效果。
这种效果将围绕一个物体创建一个持续的动画,看起来像一个在物体边缘移动的白色小鼻涕虫(看起来像一团辉光)
(一旦我学会了正确的措辞,就会编辑这个问题)
我有一个小的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; }
}
[演示]
这可能有助于
下面的代码在指定的边界内移动一个点。请看:通过调整同一个点的宽度和高度,你可能会有一个类似蛇的生物。看看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>
这将在指定的边界内移动一个点。请看:通过调整同一个点的宽度和高度,你可能会有一个类似蛇的生物
以下是对@Starx答案的改进。我已经使#snake
维度独立,并为其提供了带有长方体阴影的辉光效果。演示
<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; }
}
多条蛇:-)
Hay在javascript/css3动画上快速搜索后。
看看这个演示
前面这个关于stackoverflow的问题涉及边界辉光效应。
https://stackoverflow.com/questions/15008931/animated-glowing-border-using-css-js链路
您还可以使用javascript动画库,例如createjs。http://www.createjs.com/#/TweenJS
创建四个图像,它们应该比项目大一点,所以当你看它时,项目是有"蛇形"边界的背景上的前景。
创建一个具有固定颜色的。并使其在边界周围"蜿蜒"。确保它比物品本身大一点。
下一个图像应该是不同的颜色,即较浅的颜色,以创建辉光效果。
下一个图像应该是第一个图像中使用的颜色,但完全相反。第一个图像中的所有波峰都必须是波谷(使其变得蜿蜒)。
第四个图像与第三个图像相同,但颜色较浅。
现在,使用JQuery,使用"animate",更改项目的背景,并按顺序在这四个图像之间循环。这在某种程度上创造了一种"发光和爬行"的效果。
您可以将其扩展到四个图像之外,添加更多图像,以进一步增强效果。
- Canvas Html5绘图应用程序,移动画布会导致重大问题
- 正在SharePoint 2013母版页中添加JQuery移动文件
- 如何在android中使用phonegap将文件从一个文件夹移动/复制到另一个文件夹
- 如何使用phaser使html5游戏在移动设备浏览器上运行
- FabricJs-限制主对象内添加对象的移动区域
- 如何从画布上的某个移动事件中获取X和Y
- 触摸移动时切换到新元素
- 每当您在选择器内移动鼠标时,悬停功能就会重复
- 停止jQuery UI滑块移动超过给定值
- 谷歌地图API v3不适用于移动浏览器或PhoneGap
- 如何在Javascript中在桌子周围随机移动图像
- 在字符串的各个部分周围移动
- 如何在不移动 html 中周围元素的情况下扩展图像
- 在点击按钮时在谷歌地图周围移动
- 在不使用滚动条的情况下在巨大的 html 页面周围移动浏览器视图
- 元素周围的蛇形移动发光
- 如果在 DOM 周围移动,SVG 元素将丢失事件处理程序
- 在不移动光标的情况下,在contentitable内的某些文本周围放置标记
- 如何移动一个图像周围的箭头键javascript
- Javascript/HTML5 -使用WASD在矩形周围移动制作画布动画.在执行A键和W键时遇到困难