hi,大家好,今天我们来说说关于框架的那些事吧😝
随着HTML5规范的不断完善,围绕着这一生态有很多实用的框架,极大的提高了我们的开发效率,常见的框架代表有:UI层面的有Bootstrap、Yui、JqueryUI、CSS3Lib等,JS层面的有JQuery、Zeptojs、Angularjs、React、Vuejs等,还有很多常用的动画库、字体图标,比如:Animate、Wow、Iconfont、Iconmoon等。
这些前端框架典型的特点:简单易用、相通性强,我们可以在学习一个框架后快速上手其他框架。
主要知识点:Animate、WOW.js、 scrollReveal.js、Zepto.js、Bootstrap、 jQuery 等
2.Animate
1.简介
Animate.css是一个css动画样式库,其目标是让CSS动画像喝水一样容易(Just-add-water CSS Animation)。
animate.css is a bunch of cool, fun, add cross-brower animations foy you to use in your projects. Greate for emphasis, home pages, sliders, and general jus-add-water-awesomeness.(animate.css是有一堆狂拽酷炫吊炸天、跨浏览器的动画特效的综合动画库)
animate.css是一个来自国外的CSS3动画库,它预设了抖动(shake)、闪烁(flash)、弹跳(bounce)、翻转(flip)、旋转(rotateIn\/rotateOut)、淡入淡出(fadeIn\/fadeOut)等多达70多种动画特效,几乎包含了所有常见的动画特效。
重点:浏览器兼容,animate.css底层是通过css3实现的,当然是只兼容支持CSS3 animate属性的浏览器:IE10+、Firefox、Chrome、Opera、Safari。
2.最简单的使用
1.下载Animate的框架
官网:https://daneden.github.io/animate.css/
github:https://github.com/daneden/animate.css
2.集成到项目
3.将动画添加到标签中
4.循环播放动画
5.定制动画
3.案例实战
1.导入登录项目
2.引入Animate动画库
3.引入jQuery
4.实现点击登录的动画
5.刷新页面
6.动画的合成
在合成动画之前删除之前的动画