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

我不是女神ヾ 2022-07-14 06:15 154阅读 0赞

[CodePen ][CodePen]是一个在线的前端代码编辑和展示网站，能够编写代码并即时预览效果。可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果

## 9. 3D Synth ##

[Pure CSS 3D Synthesizer (mousedown for rotation)][Pure CSS 3D Synthesizer _mousedown for rotation] by Nikolay Talanov ([@suez][suez]).

使用纯 CSS 制作的 3D 电子琴效果，点击鼠标可以旋转。

## 10. Cascading Solar System ##

[Cascading Solar System!][Cascading Solar System] by Tady Walsh ([@tadywankenobi][tadywankenobi]).

太阳系的模型，完成了旋转速度、卫星和每一个大的行星的细节。看起来就像现实世界的东西！

## 11. 3D Solar System ##

[Full CSS 3D Solar System][] by Wayne Dunkley ([@waynedunkley][waynedunkley]).

另一个太阳系的系统模型，不过这个是 3D 的，有美丽的阴影效果。

## 12. Flat Design Camera ##

[Flat design camera with CSS animation][] by Damien Pereira Morberto ([@damienpm][damienpm]).

使用CSS动画模拟在相机上按下快门，拍摄照片的动画效果。

## 13. Day and Night Transition ##

[Day Night simulation][] by Szymon Stypa ([@Catagen][Catagen]).

点击下面的按钮可以看到白天和黑夜的模拟效果。

## 14. Animated Sprite with CSS ##

[Animate sprite with CSS][] by Avaz Bokiev ([@samarkandiy][samarkandiy]).

示范序列图像（雪碧图）可以用来创建定格动画，配有正向和反向运动。

## 15. Dodecahedron ##

[Dodecahedron][] by wontem ([@wontem][wontem]).

一个完全用 CSS 创建的微妙的，美丽的十二面体动画。

1. [jQuery Transit][]

![661a49f8-2a74-39b0-846f-20ae00d4b11f.jpg][]

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

![6fa06a0b-8569-3ebb-8d2a-9c743d0924ad.jpg][]

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

![9f73816d-aab0-3f85-9f88-4a5d0bad39a3.jpg][]

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

![07654dd5-afcd-359e-9cd0-e70853f61d34.jpg][]

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

![6aaa4c95-4c6d-305f-8908-917e307c9c8b.jpg][]

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

![05db8e05-95e5-3c6a-815e-a53d1f77b700.jpg][]

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

![f6ccc58c-28f1-32e2-a466-f18468965013.jpg][]

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

![fd1c9bec-64ce-3ca9-9f06-c2e075ea91bf.jpg][]

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

![d7a2f184-e50f-3d1c-9bef-e8fb6d28a8e5.jpg][]

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

![a2868ddf-b750-3af7-9f8b-821cee4b0961.jpg][]

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

转载:[http://www.yyyweb.com][http_www.yyyweb.com]

[CodePen]: http://codepen.io
[Pure CSS 3D Synthesizer _mousedown for rotation]: http://codepen.io/suez/pen/GJKRPN/
[suez]: http://codepen.io/suez
[Cascading Solar System]: http://codepen.io/tadywankenobi/pen/QbWNGR/
[tadywankenobi]: http://codepen.io/tadywankenobi
[Full CSS 3D Solar System]: http://codepen.io/waynedunkley/pen/YPJWaz/
[waynedunkley]: http://codepen.io/waynedunkley
[Flat design camera with CSS animation]: http://codepen.io/damienpm/pen/esoJG/
[damienpm]: http://codepen.io/damienpm
[Day Night simulation]: http://codepen.io/Catagen/pen/PqYdXR/
[Catagen]: http://codepen.io/Catagen
[Animate sprite with CSS]: http://codepen.io/samarkandiy/pen/aOoBXq/
[samarkandiy]: http://codepen.io/samarkandiy
[Dodecahedron]: http://codepen.io/wontem/pen/PqYXop/
[wontem]: http://codepen.io/wontem
[jQuery Transit]: http://ricostacruz.com/jquery.transit/
[661a49f8-2a74-39b0-846f-20ae00d4b11f.jpg]: /images/20220714/2a6884e2163a456c890aebede73b5eea.png
[Transform.js]: http://transformjs.strobeapp.com/
[6fa06a0b-8569-3ebb-8d2a-9c743d0924ad.jpg]: /images/20220714/b923b667daf741e299602b75c86e0285.png
[Paper.js]: http://paperjs.org/
[9f73816d-aab0-3f85-9f88-4a5d0bad39a3.jpg]: /images/20220714/6be5eb42790a4e3888f596929033895e.png
[Move.js]: http://visionmedia.github.com/move.js/
[07654dd5-afcd-359e-9cd0-e70853f61d34.jpg]: /images/20220714/d51e2a7c2040480b80f4d145d144341c.png
[JSAnim]: http://jsanim.com/
[6aaa4c95-4c6d-305f-8908-917e307c9c8b.jpg]: /images/20220714/0b602caab99c4acb9db63d32db34d93c.png
[GX]: http://gx.riccardodegni.net/
[05db8e05-95e5-3c6a-815e-a53d1f77b700.jpg]: /images/20220714/2aa31140d509488e86e6eaed23d2a400.png
[Animatable]: http://leaverou.github.com/animatable/
[f6ccc58c-28f1-32e2-a466-f18468965013.jpg]: /images/20220714/585456a279764440834cd73b970c4bd4.png
[Animate.css]: http://daneden.me/animate/
[fd1c9bec-64ce-3ca9-9f06-c2e075ea91bf.jpg]: /images/20220714/6cde209708914ff48e8fa5a2a24cb75c.png
[fx]: http://fx.inetcat.com/
[d7a2f184-e50f-3d1c-9bef-e8fb6d28a8e5.jpg]: /images/20220714/d9e999a4dc7f4a0f809c9fe97f770a2d.png
[Scripty2]: http://scripty2.com/
[a2868ddf-b750-3af7-9f8b-821cee4b0961.jpg]: /images/20220714/98d51146841d40a2b2b9339fac10ad48.png
[http_www.yyyweb.com]: http://www.yyyweb.com