北京WEB前端培训
在线咨询 电话咨询 校区地址

课程

环境

就业

试听

企业培训

扫码
关注

首页 / 

行业资讯

北京web前端培训 让你的网页动起来-animated.css

时间: 来源:火星人

在animated被提出并实现之前,我们要想在页面上实现一些动态效果必须依赖js。现在就不同了,我们有了animated,使用它可以用简单的代码实现复杂精细的动画。并且减少了系统占用,优化了前端工作。让javscript可以从繁琐的动画中解脱,做他该做的数据交互去了。


但是就算对于javascript相对简化了还不够,我们工作时最求的总是效率,用最少的代码,最短的时间来完成任务。有没有什么方法能让我们的工作再简化一点呢?答案是肯定的,今天我就来给大家推荐一款css动画库————animated.css


animate.css是来自dropbox的工程师Daniel Eden开发的一款CSS3的动画效果小类库(让我们感谢这位慷慨的先生,没有这些无私分享的作者就没有这些方便的工具)。包含了60多款不同类型的CSS3动画,包括但不限于:晃动,闪动,各种淡出淡出效果,如果你想快速的整合各种CSS3动画特效的话,使用它即可方便的实现。使用也非常简单,引入animated.css文件,再使用JS来添加对应动画的类定义即可。


比如:
<head>
        link rel="stylesheet" href="animate.min.css">
</head>

它的使用方法非常方便,添加对应的动画效果(class定义)到你需要动画展示的HTML元素上即可。


就像这样:
<div class="animated bounce"><"/div>

如果他是一个html元素的话他现在会是这样的(我给它设置了宽高和背景色):


点我点我

如果你想使其多次发动动画效果或者拥有动态用户互动效果,你可以用jQuery控制它的class(当然,你也可以用原生js或者其他的什么),这非常方便。事实上我在之前的那个红色小方块上就添加了一小段js代码,你可以重复触发它。


本文知识简单的介绍了aniated.css的用法,详细的使用说明你需要去阅读作者的说明文档(它包含的动画有六十多种,至少你需要知道他们的类名),你可以在github下载到animated.css的zip包,其中包括说明文档,编辑器(你可以用它编辑你的animated.css,让你在服务器使用它时只包含必要的部分,节约服务器资源)和它的本体等,百度也可以轻松找到它。

关键词:北京web前端培训,北京web前端,北京前端开发,北京HTML5培训

热门课程推荐  点击查看全部课程

北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
  • 北京UI培训
  • 北京web前端培训
北京UI培训
  • 14年教育品牌
  • 课程不断更新
  • 签订就业协议
  • 项目案例讲解
  • O2O教学模式

北京火星人科技文化发展中心版权所有 Copyright & copy 2002-2016 2ds.cn, All Rights Reserved 京ICP备 10216795号