Question

您好我试图在页面加载上为hr标记设置动画，就像在此链接上一样。是否可以不使用svg动画？ CSS，jquery？

谢谢！

Answer 1

这可以通过css转换很容易地完成。

首先，给所有hr标签一个类，例如“trans-grow”

我通常喜欢在名为“transition.css”的文件中保留转换 - 或类似的东西。但是，您不必这样做，可以将其包含在主css文件中：

.trans--grow{
    -webkit-transition: width 1s ease-out; /* For Safari 3.1 to 6.0 */
    transition: width 1s  ease-out;
    width : 0%;
}

然后在css中添加另一个类。我们称之为成长：

.grow{
    width:100%;
}

有趣的事实：将hr标签的左边距或右边距设置为零将使hr分别从左侧或右侧增长

现在，我们将使用一些小的javascript。我将使用jQuery，因为它似乎你要求它，但你绝不必使用它。根据您希望触发转换的方式/时间，您的代码可能最终看起来不同。但是我们假设页面加载就足够了。您的代码将如下所示：

setTimeout(function(){
    $('.trans--grow').addClass('grow');
}, 275);

你有它！

这是一个小例子：