阅读更多

3顶
0踩

Web前端
在网站中嵌入动画已成为近年来的一个设计趋势,许多公司都已开始转向并拥抱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 ...

  • (源码)基于 Koa2 的 FEBLOG API.zip

    # 基于 Koa2 的 FEBLOG API ## 项目简介 FEBLOG API 是一个基于 Node.js 和 Koa2 框架的 RESTful API 服务器,支持多种关系型数据库(如 PostgreSQL、MySQL、MariaDB、SQLite、MSSQL),并使用 Sequelize 作为 ORM。项目支持跨域请求、JSON 数据传输、JWT 身份认证等功能,适用于构建前后端分离的应用。 ## 主要特性和功能 跨域支持通过配置支持跨域请求。 数据传输格式支持 applicationxwwwformurlencoded、multipartformdata、applicationjson 格式的 POST、PUT、DELETE 请求。 JWT 身份认证通过 JWT 实现用户身份认证。 数据库支持使用 Sequelize ORM 支持 PostgreSQL、MySQL、MariaDB、SQLite、MSSQL 等多种数据库。

  • 存储器实验资料.zip

    存储器实验资料.zip

  • (源码)基于 Python 的知乎热榜爬虫及数据处理项目.zip

    # 基于 Python 的知乎热榜爬虫及数据处理项目 ## 项目简介 本项目基于 Python 编程语言,旨在实现知乎热榜的定时跟踪以及相关数据的存储与查询操作。通过爬虫技术获取知乎热榜问题的详细信息,将数据存入数据库,同时提供一系列 SQL 查询示例帮助用户熟悉 SQL 基本语法,还包含使用 Selenium 实现 GPA 计算器的功能。 ## 项目的主要特性和功能 1. 知乎热榜爬虫定期爬取知乎热榜,获取问题摘要、描述、热度、访问人数、回答数量等基本信息,并将数据存入数据库。 2. 可定制爬虫逻辑用户可以选择删除已有代码从零开始编写,也可以完成代码填空实现相应功能。 3. GPA 计算器使用 Selenium 模拟点击登录 WebVPN,登录 info 并访问成绩单页面,查询成绩并计算每学期的绩点。 4. SQL 练习提供一系列基于 MySQL 数据库的 SQL 查询练习,帮助用户熟悉基本的 SQL 语法,如添加新列、数据填充、关键词查询等。

  • (源码)基于C语言的学生信息管理系统.zip

    # 基于C语言的学生信息管理系统 ## 项目简介 这是一个基于文本界面的学生信息管理系统,旨在通过简单的文本输入实现学生信息的添加、查找、修改和删除操作。系统采用链表数据结构存储学生信息,并支持文件读写功能以持久化存储数据。 ## 项目的主要特性和功能 ### 主要特性 1. 文本界面操作用户通过控制台输入指令完成操作。 2. 链表数据结构使用链表存储学生信息,方便信息的添加和删除。 3. 文件操作支持将学生信息数据保存到文件,以及从文件中读取数据。 ### 功能详解 登录验证用户需输入正确的学号和密码才能进入系统。 主界面展示显示系统主菜单,包括学生信息查找、删除、添加、修改和录入等功能。 学生信息查找根据学号查找学生信息。 学生信息删除根据学号删除学生信息。 学生信息添加可以添加新的学生信息到系统中。 学生信息修改可以修改已存在的学生信息。 学生信息录入展示所有存储的学生信息。 辅助功能

  • (源码)基于VS Code的px到rpx转换工具.zip

    # 基于VS Code的px到rpx转换工具 ## 项目简介 本项目是一款VS Code插件,旨在将前端代码里的单位px转换为rpx。当设计师在设计稿中使用px单位时,开发者能够借助该工具快速把代码中的px转换为小程序适用的rpx单位。它借助语法分析技术实现精准转换,避免误改其他属性里的px。 ## 项目的主要特性和功能 1. 自动转换功能能通过简单命令自动识别并转换style标签内所有声明中的px为rpx。 2. 精准转换利用语法分析,仅对真正的单位值进行转换,防止错误修改其他内容中的px字符。 3. 部分转换支持可选择部分样式代码进行转换,操作灵活便捷。 ## 安装使用步骤 假设用户已下载本项目源码文件且安装了VS Code环境。 1. 安装插件打开VS Code,进入侧边栏的扩展视图,搜索并安装“px2rpx”插件。 2. 重启VS Code安装完成后重启VS Code使插件生效。

  • test文件资包 传递使用

    test文件资包。传递使用

  • LCCC2701 智能车灯控制系统设计 20250329

    主控:AT89C52 显示:LCD1602 光照检测:光敏电阻 距离检测:超声波测距 远光灯 近光灯 按键(设置阈值) 1、使用光敏电阻实时检测环境光线强度,设置阈值判断是否开启远光灯; 2、利用超声波传感器测量迎面车辆距离,设置安全距离阈值,自动切换到近光灯; 3、加入延时功能(例如在检测到迎面车辆后等待3秒再切换灯光),以减少频繁切换,提升平滑性。 4、所选传感器模块、执行器模块、电源与接口电路等模块的型号需要是便宜的。

  • ESP32之阿里云OTA固件升级(源码)

    esp-idf-v5.3.2

  • 信息安全领域实战项目【信息安全领域】实战项目汇总:涵盖网络渗透测试、Web应用安全加固、企业安全策略制定等内容多个信息安全领域的实战

    内容概要:本文介绍了多个信息安全领域的实战项目,涵盖网络渗透测试、Web应用安全加固、企业安全策略制定与实施、恶意软件分析、数据泄露应急响应、物联网设备安全检测、区块链安全审计和云安全防护。每个项目都详细描述了其目标和具体实施步骤,包括信息收集、漏洞扫描、利用和修复、安全配置、风险评估、制度建设、培训教育、样本获取与分析、事件响应、遏制措施、调查取证、数据恢复、安全检测、架构分析、智能合约审计、共识机制审查、云环境评估、访问管理、网络安全防护等方面。 适合人群:信息安全从业者、IT管理人员、安全顾问、系统管理员、开发人员以及对信息安全感兴趣的人员。 使用场景及目标:①为信息安全从业人员提供实际操作指导,帮助其掌握不同场景下的安全防护技能;②为企业提供全面的信息安全保障方案,确保其信息系统和数据的安全性;③为开发人员提供安全编码和系统设计的最佳实践指南,提高应用程序的安全性;④为安全研究人员提供深入分析恶意软件和区块链系统的工具和方法。 阅读建议:读者可以根据自身需求选择感兴趣的部分进行深入学习,建议结合实际案例进行实践操作,同时关注最新的安全技术和法规要求,以确保所学知识与时俱进并能应用于实际工作中。

  • (源码)基于C语言和STM32F0系列微控制器的宏键盘系统.zip

    # 基于C语言和STM32F0系列微控制器的宏键盘系统 ## 项目简介 本项目是基于C语言和STM32F0系列微控制器开发的宏键盘系统。该系统可让用户自定义宏按键,实现快速输入或自动化任务,涵盖硬件的GPIO输入输出控制、USB通信以及中断处理等功能。 ## 项目的主要特性和功能 宏定义用户能通过定义keymappings.h文件中的宏按键,自定义按键行为。 USB通信利用STM32F0系列微控制器的USB库,支持HID类通信。 GPIO控制实现对键盘按键读取和发送操作的控制。 中断处理可处理按键状态变化、USB通信等外部中断请求。 电源管理对微控制器的睡眠、停止和待机等电源模式进行管理。 ## 安装使用步骤 ### 硬件准备 确保STM32F0系列微控制器(如STM32F042K6)的GPIO引脚、USB接口等硬件连接正确。 保证所有必要外设(如LED、按键)正确连接且可用。 ### 软件准备 下载并解压项目源代码。

  • COMSOL多物理场仿真中熔池枝晶模型的构建与应用

    内容概要:本文详细介绍了如何利用COMSOL Multiphysics软件构建熔池枝晶模型,用于模拟金属在凝固过程中枝晶的生长行为。主要内容涵盖三个关键模块:传热、流体流动和相场。通过定义相应的偏微分方程(如传热方程、Navier-Stokes方程和相场方程),设置适当的边界条件和初始条件,并进行多物理场耦合求解,最终实现了对熔池温度分布、速度场及枝晶生长过程的精确模拟。此外,还探讨了如何优化求解器配置、处理移动边界条件、引入各向异性效应以及提高计算效率的方法。 适合人群:从事材料科学、冶金工程、增材制造等领域研究的专业人士和技术人员。 使用场景及目标:适用于需要深入了解金属凝固过程中微观结构演变机制的研究项目,特别是在激光熔覆、焊接等工艺中,帮助研究人员预测和优化材料性能。 其他说明:文中不仅提供了详细的建模步骤指导,还包括一些实用技巧,如参数选择、网格划分策略、热源耦合方式等,有助于解决实际建模过程中可能遇到的问题。

  • 基于COMSOL的地下二氧化碳封存多物理场耦合仿真研究

    内容概要:本文详细介绍了利用COMSOL Multiphysics进行地下二氧化碳封存仿真的方法和技术要点。主要内容涵盖两相流模块设置、温度场耦合、地层分层建模以及力学模块处理等方面。文中不仅提供了具体的数学模型和代码片段,如相对渗透率函数、热膨胀系数函数等,还分享了许多实际操作中的经验和教训,强调了不同物理场之间的相互作用及其对模拟结果的影响。 适合人群:从事地质工程、环境科学、石油工程等领域研究的专业人士,尤其是那些需要进行地下流体运移和储层特性研究的科研工作者。 使用场景及目标:适用于希望深入了解地下二氧化碳封存机制的研究人员,帮助他们掌握如何使用COMSOL软件构建复杂的多物理场耦合模型,从而更好地预测和评估二氧化碳封存的安全性和有效性。 其他说明:文章中提到的技术细节对于确保模拟精度至关重要,例如正确处理单位转换、选择合适的渗透率模型、考虑温度变化对岩石性质的影响等。此外,作者还提醒读者应注意避免一些常见的错误配置,以免导致不可靠的结果。

  • ENCAP 2023打分表

    ENCAP 2023打分表

  • 中国上市公司协会:2022年中国上市公司董事会秘书履职报告.pdf

    中国上市公司协会:2022年中国上市公司董事会秘书履职报告

Global site tag (gtag.js) - Google Analytics