HTML 分区边框动画

Html Division border animation

本文关键字：动画 边框 分区 HTML      更新时间：2023-09-26

我一直在学习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自行车"

假设你想要一个围绕框的动画，它可以通过对一系列线条进行动画处理来排列，每个动画在完成时都会触发下一个。

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

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

演示

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

假设你想要一个渐变边框，或者你所说的流动是什么意思？

是的，可以做到。

示例 2px 渐变边框：

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

见 http://jsfiddle.net/njL3H/

相关文章：