资讯频道 → Web前端
阅读更多

3顶
0踩

Web前端

翻译新闻 10个顶级的CSS和Javascript动画框架推荐

2011-11-30 16:46 by 资深编辑 luiang1018 评论(3) 有60980人浏览
Css JavaScript jQuery 动画框架
在网站中嵌入动画已成为近年来的一个设计趋势，许多公司都已开始转向并拥抱HTML5、CSS3和JavaScript这个技术“三人组”。尽管这些技术还不能制作一些非常复杂的动画（像flash所实现的），但是如果拥有好的想法及创造性思维，使用它们制作的即便是一些简单的动画也足以打动我们。

而且，随着CSS3技术的发展，CSS3动画日益流行。目前，WebKit浏览器已对CSS3动画支持得相当好。Firefox已经打算采用Webkit代码，IE 10中也会加入Webkit支持。

本文介绍一些JavaScript和CSS动画框架，个人认为相当实用，希望它们能帮助你创建出令人着迷的用户体验。

1. jQuery Transit


该jQuery插件扩展了jQuery的动画功能，增加了许多CSS3特性，如rotata（旋转）、skew（扭曲）、scale（缩放）等。

2. Transform.js


这也是一个jQuery插件，不过它扩展的是animate()与css()方法的功能。通过其引入的CSS3属性你可以完成一系列的动画效果。

3. Paper.js


Paper.js是一个开源的矢量图形脚本框架，运行于HTML5 Canvas（画布）之上。它提供了一个整洁的场景图（Scene Graph）或文档对象模型来创建矢量图形，并且拥有许多强大的功能，可以生成贝赛尔曲线等。所有这一切都通过一个精心设计的整洁一致的编程接口封装了起来。

4. Move.js


Move.js是一个小巧的JavaScript库，可以创建非常简单而优雅的CSS3动画。

5. JSAnim


jsAnim是一个强大却易于使用的JavaScript库，绝对可以让你创建令人惊叹的动画效果，而不会影响项目的可用性。它只有不到25KB，但却非常强大。

6. GX


GX是一个功能完善的、跨浏览器的超轻量级（未压缩状态下只有10KB）JavaScript动画框架。使用GX框架，你可以利用所有的W3C CSS属性来创建复杂动画效果。

7. Animatable


纯粹的CSS3动画方案。这里有一个demo，你可以看见使用它能实现什么样的动画效果。

8. Animate.css


Animate.css是一个可直接用于项目的有趣的、跨浏览器动画方案，包括一个纯粹的CSS3动画库及一些预定义的动画片段。

9. $fx


一个轻量级的JavaScirpt动画库，对JavaScript DOM函数进行了扩展。它体积很小（只有3.7KB）——健壮的实现，较低的学习成本，总之$fx是一个不错的选择。

10. Scripty2


Scripty2是一个强大灵活的JavaScript框架，可以让你编写属于自己的“可视化大餐”或者令人深刻的用户界面。它是Flash的竞争对手。

Via  QUENESS
  • 大小: 5.6 KB
  • 大小: 11 KB
  • 大小: 9.4 KB
  • 大小: 5.8 KB
  • 大小: 11.6 KB
  • 大小: 11.2 KB
  • 大小: 15 KB
  • 大小: 18.7 KB
  • 大小: 15.7 KB
  • 大小: 12.8 KB
3
顶
0
踩
评论 共 3 条 请登录后发表评论
3 楼 PeakFish 2014-10-27 09:02
||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||
||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||
||||||||||||||||||||||||||||
||||||||||||||||||||||||||||
|||||||||||||||||||||||||||
|||||||||||||||||||||||||||
||||||||||||||||||||||||||
||||||||||||||||||||||||||
|||||||||||||||||||||||||
|||||||||||||||||||||||||
||||||||||||||||||||||||
||||||||||||||||||||||||
|||||||||||||||||||||||
|||||||||||||||||||||||
||||||||||||||||||||||
||||||||||||||||||||||
|||||||||||||||||||||
|||||||||||||||||||||
||||||||||||||||||||
||||||||||||||||||||
|||||||||||||||||||
|||||||||||||||||||
||||||||||||||||||
||||||||||||||||||
|||||||||||||||||
|||||||||||||||||
||||||||||||||||
||||||||||||||||
|||||||||||||||
|||||||||||||||
||||||||||||||
||||||||||||||
|||||||||||||
|||||||||||||
||||||||||||
||||||||||||
|||||||||||
|||||||||||
||||||||||
||||||||||
|||||||||
|||||||||
||||||||
||||||||
|||||||
|||||||
||||||
||||||
|||||
|||||
||||
||||
|||
|||
||
||
|
|
2 楼 PeakFish 2014-10-27 09:01
[/flash]
||||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||
|||||||||||||||||||||||||||||
||||||||||||||||||||||||||||
||||||||||||||||||||||||||||
|||||||||||||||||||||||||||
|||||||||||||||||||||||||||
||||||||||||||||||||||||||
||||||||||||||||||||||||||
|||||||||||||||||||||||||
|||||||||||||||||||||||||
||||||||||||||||||||||||
||||||||||||||||||||||||
|||||||||||||||||||||||
|||||||||||||||||||||||
||||||||||||||||||||||
||||||||||||||||||||||
|||||||||||||||||||||
|||||||||||||||||||||
||||||||||||||||||||
||||||||||||||||||||
|||||||||||||||||||
|||||||||||||||||||
||||||||||||||||||
||||||||||||||||||
|||||||||||||||||
|||||||||||||||||
||||||||||||||||
||||||||||||||||
|||||||||||||||
|||||||||||||||
||||||||||||||
||||||||||||||
|||||||||||||
|||||||||||||
||||||||||||
||||||||||||
|||||||||||
|||||||||||
||||||||||
||||||||||
|||||||||
|||||||||
||||||||
||||||||
|||||||
|||||||
||||||
||||||
|||||
|||||
||||
||||
|||
|||
||
||
|
|
1 楼 coffeesweet 2011-12-05 17:28
js做的动画总感觉很占CPU。。。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 29款免费的WEB设计中的顶级CSS工具和应用

    1. Metro UI CSSMetro UI CSS 是一套实现了Windows 8 的 Metro 风格界面的 CSS 框架。2. CSScombCSScomb 可使用指定的排序方法对 CSS 的属性进行排序，提供多种版本，包括：CSScomb Online CSScomb for Sublime Text...

  • 顶级的CSS和Javascript动画框架推荐

    CodePen 是一个在线的前端代码编辑和展示网站，能够编写代码并即时预览效果。可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果 9. 3D Synth Pure CSS 3D Synthesizer (mousedown for rotation...

  • 顶级的CSS和Javascript动画框架

    CodePen 是一个在线的前端代码编辑和展示网站，能够编写代码并即时预览效果。可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果 1.jQuery Transit 该jQuery插件扩展了jQuery的动画功能，增加了...

  • 10个顶级的CSS UI开源框架

    本文分享了10个顶级的CSS UI开源框架，有几个确实不错，一起来看看。 1、Bootstrap– 最流行的Web前端UI框架 Bootstrap是由twitter推出的Web前端UI框架，它由Twitter的设计师Mark Otto和Jacob Th.

  • 10个顶级Web移动开发JavaScript框架推荐

    10个顶级Web移动开发JavaScript框架推荐 这些轻量级框架使用HTML5和CSS3标准来帮助您快速开发跨平台的Web移动应用和网站。 AD：2014WOT全球软件技术峰会北京站 课程视频发布 1.jQuery Mobile ...

  • Font Awesome图标字体库提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式

    Font Awesome图标字体库提供可缩放矢量图标,它可以被定制大小、颜色、阴影以及任何可以用CSS的样式

  • EDAfloorplanning

    介绍了physical design的floorplanning问题

  • 数学建模培训资料 数学建模实战题目真题答案解析解题过程&论文报告 最低生活保障问题的探索 共20页.pdf

    数学建模培训资料 数学建模实战题目真题答案解析解题过程&论文报告 最低生活保障问题的探索 共20页.pdf

  • 变更用水性质定额申请表.xls

    变更用水性质定额申请表.xls

  • GitHub Desktop版快速下载

    从官网上下载下来，作为资源存储，方便安装，此资源为windows版本

  • 嗨玩旅游网站-JAVA-基于springboot嗨玩旅游网站设计与实现（毕业论文+PPT）

    嗨玩旅游网站-JAVA-基于springboot嗨玩旅游网站设计与实现（毕业论文+PPT）

  • 本科毕业设计 基于Python中国知网（cnki）爬虫及数据可视化详细文档+全部资料.zip

    【资源说明】 本科毕业设计 基于Python中国知网（cnki）爬虫及数据可视化详细文档+全部资料.zip 【备注】 1、该项目是个人高分项目源码，已获导师指导认可通过，答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 3、本项目适合计算机相关专业(人工智能、通信工程、自动化、电子信息、物联网等)的在校学生、老师或者企业员工下载使用，也可作为毕业设计、课程设计、作业、项目初期立项演示等，当然也适合小白学习进阶。 4、如果基础还行，可以在此代码基础上进行修改，以实现其他功能，也可直接用于毕设、课设、作业等。 欢迎下载，沟通交流，互相学习，共同进步！

  • 三菱plc基于mx组件的通用访问远程api接口

    api代码

  • 基于 Java 实现的24点卡牌游戏课程设计

    【作品名称】：基于 Java 实现的24点卡牌游戏【课程设计】 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。 【项目介绍】： Java小游戏--24点卡牌游戏 将扑克牌（除大小王）随机打乱，每次出现4张卡牌，每张卡牌使用一次，13个回合。 A代表1，J代表11，Q代表12，K代表13。 可2-4人局域网同时在线对战，100秒倒计时结束前回答正确可获得积分，先回答的可获4分，后回答的分数依次递减。 实时显示玩家排名。 【资源声明】：本资源作为“参考资料”而不是“定制需求”，代码只能作为参考，不能完全复制照搬。需要有一定的基础看懂代码，自行调试代码并解决报错，能自行添加功能修改代码。

  • 用 Python 实现的可扩展布隆过滤器.zip

    用 Python 实现的可扩展布隆过滤器皮布卢姆pybloom是一个包含 Bloom Filter 数据结构以及可扩展 Bloom Filter 实现的模块，如下所述P. Almeida、C.Baquero、N. Preguiça、D. Hutchison，可扩展布隆过滤器，(GLOBECOM 2007)，IEEE，2007。如果您了解需要提前留出多少位来存储整个集合，那么布隆过滤器就是您的不二之选。可扩展布隆过滤器允许您的布隆过滤器位根据误报概率和大小进行增长。当过滤器达到容量上限时，即为“满”M * ((ln 2 ^ 2) / abs(ln p))，其中 M 是位数，p 是误报概率。当达到容量上限时，将创建一个比上一个过滤器大得多的新过滤器，其误报概率更小，哈希函数数量更多。>>> from pybloom import BloomFilter>>> f = BloomFilter(capacity=1000, error_rate=0.001)>>> [f.add(x) for x in range(10)][False, False, False,

  • 计算机学院宿舍美化大赛.rar

    计算机学院宿舍美化大赛.rar

  • 基于java的运动器械购物商城设计与实现.docx

    基于java的运动器械购物商城设计与实现.docx

  • 基于PBL-CDIO的材料成型及控制工程课程设计实践与改革

    内容概要：文章介绍了针对“卓越工程师教育培养计划”，结合PBL和CDIO工程教育理念，对材料成型及控制工程专业课程设计的实践教学改革进行探索。首先在命题设计上依托企业实践项目，确保设计内容与生产实际紧密结合，具有较强的创新性和实用性。在过程管理中，采用分组合作和面向实际问题导向的教学方法，提升学生的工程素养和创新思维。通过课程设计的成绩考核，结合校内外导师的共同评价，客观全面衡量学生的学习成果。指导教师发挥了组织、支持和引导等多方面的角色作用。 适合人群：高等院校材料成型及控制工程专业学生和教学管理人员；工程教育领域的研究人员。 使用场景及目标：旨在提升工科学生的工程实践能力和创新能力，使其具备解决复杂实际工程问题的能力。通过改革教学内容和方法，改善传统课程设计中存在的不足，培养出高素质的技术人才。 其他说明：改革措施在实际运行中取得了较好的教学效果，提高了学生的就业竞争力，但仍存在一些不足之处需要在未来进行完善。

  • 设计模式学习.zip

    设计模式学习

Global site tag (gtag.js) - Google Analytics