Javascript 如何在图像内部添加滑动线

您好，我正在努力解决jquery问题，我需要的是，在图像边框内滑动线条。共有四行，我希望它们在加载页面时滑入边框内。第一行应该从下滑向上；第二个从左到右；第三个从上到下，第四个从右到左

我希望我的问题是清楚的

---

（上面提到的几行是红色的）

我将显示前两行，您可以执行其他两行

function slideLine1(){ $('#line1').animate({width: '100%'}, 1000, slideLine2); }
function slideLine2(){ $('#line2').animate({width: '100%'}, 1000, slideLine3); }

这会奏效的。但是，您可以使用1个函数（调用自身）和一个

i

变量来实现这一点。那将由你决定

---

还有其他方法可以做，这是一个非常基本的例子。提示：查看jQuery链接。

您不需要JS来完成这项工作。通过使用

关键帧

在加载时执行此动画。除非您想支持较旧的浏览器，否则此方法应该可以使用。

它只使用css

---

它基本上使用了

@关键帧来解决问题。
是的-这很清楚。你能发布你已经尝试过的代码并解释发生了什么吗？看看jQuery的方法实际上我没有一个精确的代码。我可以创建一个z-index属性行。但不知道如何滑动它们。向我们展示您已经获得的-代码。您可能能够使用CSS转换+1。有点困难，但动画会变得更平滑（使用更大的动画）。人们这样说，但我注意到，与普通的jQuery动画相比，动画是起伏的、缓慢的。我发现移动设备可以更快、更平滑地为我的菜单设置动画。可能是设备/动画敏感设备/浏览器敏感。一些浏览器/设备不像其他浏览器/设备那样处理css驱动的动画。根据我的经验，在所有浏览器和设备上创建平滑动画的最佳方法是硬件加速动画。因此，您将使用transform:translate3d（0,10px，0），而不是top:10px。这种方法通常会消除@WASasquatch所指的斩波。这非常好。但也许我不能正确地提到这个问题。线条在图像内部移动。但我想让他们从外面走向里面。