0

我一直在学习 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 感谢“就像一辆 tron 自行车”

4

2 回答 2

3

假设你想要一个围绕盒子的动画,它可以通过动画一系列线条来排列,每个动画触发下一个动画,因为它完成。

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

每条线都必须位于其适当的角落。

演示

可能可以构建一个更简洁的递归解决方案,但是您必须遵循这些思路。边框属性本身不能以这种方式进行动画处理。

于 2012-06-21T12:49:43.653 回答
-1

假设您想要渐变边框或流是什么意思?

是的,它可以做到。

示例 2px 渐变边框:

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

http://jsfiddle.net/njL3H/

于 2012-06-21T12:26:44.753 回答