主页 › 网页制作 › Animate.css 一款强大的预设css3动画库

admin 发表于 2021-8-9 22:59:04

Animate.css 一款强大的预设css3动画库

特效：https://www.jq22.com/yanshi819
特效：https://animate.style/

使用方法：
img:hover {
   animation: pulse;
   animation-duration: 1s;
}

admin 发表于 2022-2-15 20:39:30

利用animation制作版块显现动画。

CSS：
.slideInLeft{
    animation:slideInLeft;
    animation-duration: 2s;
}


JS：
$(window).on("scroll", function () {
    var wt = $(window).scrollTop() + $(window).height();
    setTimeout(function () {
      if (wt > ot("sider")) {
            for (var i = 0; i < $("sider li").length; i++) {
                $("sider ul li").eq(i).css({ "animation-delay": (i * 0.1) +"s" }).addClass("slideInLeft");
            }
      }
    }, 500);
});

function ot(o) {
    return $(o).offset().top;
}

查看完整版本: Animate.css 一款强大的预设css3动画库