栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

让css3动画变得有趣wowjs

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

让css3动画变得有趣wowjs

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


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

使用方法1. 在页面头部引入, animate.css和wow.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动画
    
    

    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

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/242559.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号