javascript - Html分区边框动画

标签 javascript jquery html

我一直在学习 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, ... );
});

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

Demo

也许可以构建一个更简洁的递归解决方案,但您必须遵循这些思路。 border 属性本身无法以这种方式设置动画。

关于javascript - Html分区边框动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11137909/

相关文章:

php - 制作一个 ScrollView ,当用户向下滚动时更新

javascript - 如何使用 HTML 禁用 JqueryUI 选项卡(不是通过代码)

javascript - Jquery IE 问题

javascript - 在单击标签滚动期间需要修复表格

javascript - 如何使用 Ajax 将 JavaScript 数组传递给 C# 函数

javascript - JSON 数据的 SQL 样式 JOIN

javascript - 动画不工作

JavaScript NaN 错误

javascript - 使用固定位置的数据过滤器(不可滚动)

javascript - 在 JavaScript 中定义变量并创建按钮?