如何在图像中添加滑动线

Question

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

我希望我的问题很明确。

（提到的行是红色的）

Answer 1

你不需要JS来做这件事。 Here is a pure CSS way使用keyframes执行此动画onload。除非您想支持旧浏览器，否则此方法应该可以正常工作。

Answer 2

我将展示前两个，你可以做另外两个

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

这会奏效。但是，您可以使用1个函数，调用自身和i变量来执行此操作。这取决于你。

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

Answer 3

Here is a demo仅使用css。

它基本上使用@keyframes来解决问题。