让css3动画变得有趣wowjs

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

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

使用方法

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


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

从左边滑入的动画

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

  • data-wow-duration: 动画持续时间
  • data-wow-delay: 动画开始之前的延迟播放的时间
  • data-wow-offset: 元素距离底部大于此数值时,开始播放动画
  • data-wow-iteration: 动画重复的次数

从左边滑入的动画

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


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




    
    wow动画
    
    




将进酒

君不见黄河之水天上来,奔流到海不复回。
君不见高堂明镜悲白发,朝如青丝暮成雪。
人生得意须尽欢,莫使金樽空对月。
天生我材必有用,千金散尽还复来。
烹羊宰牛且为乐,会须一饮三百杯。
岑夫子,丹丘生,将进酒,杯莫停。
与君歌一曲,请君为我倾耳听:
钟鼓馔玉不足贵,但愿长醉不复醒。
古来圣贤皆寂寞,惟有饮者留其名。
陈王昔时宴平乐,斗酒十千恣欢谑。
主人何为言少钱,径须沽取对君酌。
五花马,千金裘,
呼儿将出换美酒,与尔同销万古愁。

End

小结:

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

你可能感兴趣的:(让css3动画变得有趣wowjs)