animate.html

最新推荐文章于 2024-07-11 18:00:32 发布

weixin_34049948

最新推荐文章于 2024-07-11 18:00:32 发布

阅读量189

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wwthuanyu/p/10555112.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <style type="text/css">
            .div1{
                width: 300px;
                height: 300px;
                background: skyblue;
                margin: 10 auto;
            }
        </style>
    </head>
    <body>
        <div class="div1 wow bounceIn">
            
        </div>
        <div class="div1 wow bounceIn">
            
        </div>
        <div class="div1 wow bounceIn">
            
        </div>
        <div class="div1 wow bounceIn">
            
        </div>
        <div class="div1 wow bounceIn">
            
        </div>
        <div class="div1 wow bounceIn">
            
        </div>
        <div class="div1 wow bounceIn">
            
        </div>
        <div class="div1 wow bounceIn">
            
        </div>
        
        <!--
            持续时间/延迟时间/偏移值/迭代次数
        -->
        <div class="div1 wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
        <div class="div1 wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>
        
        <script src="js/wow.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var obj = {
                boxClass: 'wow',
                animateClass: 'animated',
                offset: 0,
                mobile: true,
                live: true
            }
            new WOW(obj).init();
            
            
//属性/方法    类型    默认值    说明
//boxClass    字符串    ‘wow’    ‘wow’需要执行动画的元素的 class
//animateClass    字符串    ‘animated’    ‘animated’animation.css 动画的 class
//offset    整数    0    距离可视区域多少开始执行动画
//mobile    布尔值    true    是否在移动设备上执行动画
//live    布尔值    true    异步加载的内容是否有效
        </script>
    </body>
</html>

转载于:https://www.cnblogs.com/wwthuanyu/p/10555112.html

weixin_34049948

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
animate.html

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/animate....
复制链接

扫一扫

animate.html

“相关推荐”对你有帮助么？