让css3动画变得有趣wowjs

• wowjs可以在网页滚动时, 展示css动画,是animater的好朋友, wowjs官方实例演示链接: https://mynameismatthieu.com/WOW/

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

从左边滑入的动画

• data-wow-duration: 动画持续时间

• data-wow-delay: 动画开始之前的延迟播放的时间

• data-wow-offset: 元素距离底部大于此数值时,开始播放动画

• data-wow-iteration: 动画重复的次数

从左边滑入的动画

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

    
    
    
    

    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;
    }
    将进酒

    
        君不见黄河之水天上来，奔流到海不复回。

    
    
        君不见高堂明镜悲白发，朝如青丝暮成雪。

    
    
        人生得意须尽欢，莫使金樽空对月。

    
    
        天生我材必有用，千金散尽还复来。

    
    
        烹羊宰牛且为乐，会须一饮三百杯。

    
    
        岑夫子，丹丘生，将进酒，杯莫停。

    
    
        与君歌一曲，请君为我倾耳听：

    
    
        钟鼓馔玉不足贵，但愿长醉不复醒。

    
    
        古来圣贤皆寂寞，惟有饮者留其名。

    

    
        陈王昔时宴平乐，斗酒十千恣欢谑。

    
    
        主人何为言少钱，径须沽取对君酌。

    
    
        五花马，千金裘，

    
    
        呼儿将出换美酒，与尔同销万古愁。

    End

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

作者：木子昭
链接：https://www.jianshu.com/p/7d83fb64b1a9