Javascript Html分割边界动画
我一直在学习css和jqueryJavascript Html分割边界动画,javascript,jquery,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</
<!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>
#盒子
{
边框样式：实心；
边框颜色：红色；
高度：80px；
宽度：180px；
}
演示盒
*编辑MobyD谢谢“像一辆tron自行车”假设你想要一个渐变边界，或者你所说的流动是什么意思 是的，可以做到 示例2px渐变边框： 只需创建一个相对的div定位，它在你的颜色中有一个渐变背景 然后创建一个子div，该子div绝对位于其中，宽度和高度略小 你准备好了
请参见假设您希望在长方体周围设置动画，可以通过设置一系列线的动画来安排，每个动画在结束时触发下一个动画
addLine1();
line1.animate({ width: width-of-box }, duration, function() {
addLine2();
line2.animate({ height: height-of-box }, duration, ... );
});
也许可以构建一个更简洁的递归解决方案，但您必须遵循这些原则。border属性本身不能以这种方式设置动画。您的要求不太清楚。你说的“流动”是什么意思？可以做到。但不是以直截了当的方式。你想做什么？你试过什么？你说的“流动”是指梯度？我想他的意思是他想让它像一辆tron汽车一样在div上运行，他想让border像tron汽车一样在div上运行。并不是说边界会是gradientWorks很棒！这个动画可以循环吗？我这里有一个工作演示：@Paul:。在完成整个动画时添加了颜色参数和回调，以便可以连续调用两种不同颜色的动画。可以更整洁，当然可以自己清理。如果那是你想要的那种动画。如果只想重置并重新开始，只需将整个内容放入一个函数中，并确保调用顶部的
$（'.line'）。remove（）