专栏首页木子昭的博客让css3动画变得有趣wowjs

让css3动画变得有趣wowjs

animate.css 包含了一组炫酷、有趣、跨浏览器的动画,可以在你的项目中直接使用。

使用方法

1. 在页面头部引入, animate.csswow.js, cdn地址如下:

<link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>

2. 在需要添加动画的html元素上, 新增两个类属性, 第一个为wow, 第二个为动画名如从左侧滑入slideInLeft

<p class="wow slideInLeft">从左边滑入的动画</p>

3. 添加动画控制, 主要控制四个属性:

  • data-wow-duration: 动画持续时间
  • data-wow-delay: 动画开始之前的延迟播放的时间
  • data-wow-offset: 元素距离底部大于此数值时,开始播放动画
  • data-wow-iteration: 动画重复的次数
<!--动画持续时间为2秒, 动画开始之前的延迟播放的时间为5s 元素底部距离浏览器底部400像素时开始播放动画, 动画重复次数为2次-->
<p class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="400" data-wow-iteration="2">从左边滑入的动画</p>

4. 在html底部添加初始化语句

<script>
    wow = new WOW(
        {
            boxClass: 'wow',      // 默认属性名
            animateClass: 'animated', // 默认触发的动画类(包含在animate css中)
            offset: 0,          // 为所有添加wow的元素设置 data-wow-delay属性 的默认值
            mobile: true,       // 是否在移动设备中开启动画
            live: true        // 持续监测页面中是否插入新的wow元素
        }
    );
    wow.init();
</script>

小技巧: 在animater中大多数动画名都是"见名知意"的, 在这里可以在线查看: https://cdn.bootcss.com/animate.css/3.5.2/animate.css, 具体用法可以查看下面简单的小demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wow动画</title>
    <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/wow/1.1.2/wow.min.js"></script>
</head>
<style>

    p {
        font-size: 50px;
        text-align: center;
        color:#64B587;
        line-height: 100px;
    }

    section {
        width: 800px;
        font-size: 30px;
        color: #A84631;
        text-align: center;
        line-height:60px;
        margin: 0 auto;
    }

    section div {

        height: 100px;
        line-height: 100px;
    }

</style>
<body>

<p class="wow slideInLeft">
    将进酒
</p>

<section >
    <div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="1s">
        君不见黄河之水天上来,奔流到海不复回。<br>
    </div>
    <div class="wow slideInLeft" data-wow-duration="3s" data-wow-delay="1s">
        君不见高堂明镜悲白发,朝如青丝暮成雪。<br>
    </div>
    <div class="wow bounceOutUp" data-wow-duration="2s" data-wow-delay="1s">
        人生得意须尽欢,莫使金樽空对月。<br>
    </div>
    <div class="wow fadeIn">
        天生我材必有用,千金散尽还复来。<br>
    </div>
    <div class="wow fadeInDown">
        烹羊宰牛且为乐,会须一饮三百杯。<br>
    </div>
    <div class="wow fadeInLeft">
        岑夫子,丹丘生,将进酒,杯莫停。<br>
    </div>
    <div class="wow fadeInLeftBig">
        与君歌一曲,请君为我倾耳听:<br>
    </div>
    <div class="wow fadeOutRightBig">
        钟鼓馔玉不足贵,但愿长醉不复醒。<br>
    </div>
    <div class="wow flipInX">
        古来圣贤皆寂寞,惟有饮者留其名。<br>
    </div>

    <div class="wow flipOutY">
        陈王昔时宴平乐,斗酒十千恣欢谑。<br>
    </div>
    <div class="wow lightSpeedIn">
        主人何为言少钱,径须沽取对君酌。<br>
    </div>
    <div class="wow rotateIn">
        五花马,千金裘,<br>
    </div>
    <div class="wow rotateInUpLeft">
        呼儿将出换美酒,与尔同销万古愁。<br>
    </div>
</section>
<!--动画持续时间为2秒, 动画开始之前的延迟播放的时间为5s 元素底部距离浏览器底部400像素时开始播放动画, 动画重复次数为2次-->
<p class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="400" data-wow-iteration="2">End</p>



</body>
<script>
    wow = new WOW(
        {
            boxClass: 'wow',      // 默认属性名
            animateClass: 'animated', // 默认触发的动画类(包含在animate css中)
            offset: 0,          // 为所有添加wow的元素设置 data-wow-delay属性 的默认值
            mobile: true,       // 是否在移动设备中开启动画
            live: true        // 持续监测页面中是否插入新的wow元素
        }
    );
    wow.init();
</script>
</html>

小结:

animater可以增加网页的动感效果,动画的效果和ppt类似, 如果你肯花时间, 用animater做出好看的在线ppt效果也是完全可以做到的~

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 不只是软件,在线也可以免费下载百度文库了。

    不管是学生,还是职场员工,下载各种文档几乎是不可避免的,各种XXX.docx,XXX.pptx更是家常便饭,人们最常用的就是百度文库,豆丁文库,道客巴巴这些下载...

    课代表
  • 理工男图解零维到十维空间,烧脑已过度,受不了啦!

    让我们从一个点开始,和我们几何意义上的点一样,它没有大小、没有维度。它只是被想象出来的、作为标志一个位置的点。它什么也没有,空间、时间通通不存在,这就是零维度。

    钱塘数据
  • ISUX Xcube智能一键生成H5

    腾讯ISUX
  • 中国互联网协会发布:《2018中国互联网发展报告》

    在2018中国互联网大会闭幕论坛上,中国互联网协会正式发布《中国互联网发展报告2018》(以下简称《报告》)。《中国互联网发展报告》是由中国互联网协会与中国互联...

    钱塘数据
  • 知识体系解决迷茫的你

    最近在星球里群里都有小伙伴说道自己对未来的路比较迷茫,一旦闲下来就不知道自己改干啥,今天我这篇文章就是让你觉得一天给你 25 个小时你都不够用,觉得睡觉都是浪费...

    桃翁
  • 考研英语-1-导学

    英二图表作文要重视。总体而言,英语一会比英语二难点。不过就写作而言,英语二会比英语一有难度,毕竟图表作文并不好写。

    用户1335799
  • SQL中GROUP BY用法示例

    GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类...

    Awesome_Tang
  • 白底黑字or黑底白字,眼睛更喜欢哪一个?

    腾讯大讲堂
  • 复杂业务下向Mysql导入30万条数据代码优化的踩坑记录

    从毕业到现在第一次接触到超过30万条数据导入MySQL的场景(有点low),就是在顺丰公司接入我司EMM产品时需要将AD中的员工数据导入MySQL中,因此楼主负...

    haifeiWu
  • 【系统设置】CentOS 修改机器名

    ken.io

扫码关注云+社区

领取腾讯云代金券