弘帝企业智能建站系统交流平台

 找回密码
 立即注册
查看: 2026|回复: 1

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

[复制链接]
发表于 2021-8-9 22:59:04 | 显示全部楼层 |阅读模式
特效:https://www.jq22.com/yanshi819
特效:https://animate.style/

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

回复

使用道具 举报

 楼主| 发表于 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;
}
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|弘帝企业智能建站系统 ( 皖ICP备07503252号 )

GMT+8, 2024-11-24 00:18 , Processed in 0.047561 second(s), 16 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表