Html Division边界动画

时间:2012-06-21 12:14:43

标签: javascript jquery html5

我一直在学习css& jquery的。

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#box
{
 border-style:solid;
 border-color:red;
 height: 80px;
 width: 180px;
}
</style>
</head>

<body>
<div id="box">Demo Box</div>
</body>
</html>

我想要实现的是边框颜色应该从左上方出现并流动以在分区周围创建一个框边框。如果可以的话,似乎不可能只想知道专家指导。

*编辑MobyD谢谢“像骑自行车一样”

2 个答案:

答案 0 :(得分:3)

假设你想在盒子周围制作动画,可以通过动画一系列线来安排,每个动画在完成时触发下一个动画。

addLine1();
line1.animate({ width: width-of-box }, duration, function() {
   addLine2();
   line2.animate({ height: height-of-box }, duration, ... );
});

每条线都必须放在适当的角落。

Demo

可能会构建一个更整洁的递归解决方案,但这是你必须遵循的这些方面。 border属性本身不能以这种方式设置动画。

答案 1 :(得分:-1)

假设你想要一个渐变边框或者你想要什么样的流?

是的,可以做到。

示例2px渐变边框:

只需创建一个div相对位置,其颜色具有渐变背景 然后创建一个绝对位于那里的子div,其宽度和高度略小 你准备好了。

请参阅http://jsfiddle.net/njL3H/