TA的每日心情 | 奋斗
4 小时前 |
|---|
签到天数: 2384 天 [LV.Master]伴坛终老
|
HTML5 的 Canvas 对象将改变 JavaScript 的使命，使之成为 HTML5 下强大的动画脚本编写工具。本文介绍了 8 个你从未见过的，基于 HTML5 Canvas 和 JavaScript 的动画，这些令人难以置信的效果将使你对 HTML5 彻底折服。需要指出的是，这些都是浏览器的原生动画，无需任何插件。Tunnelers
- j9 E; q* v% l3 ?" C/ ~& m! M
0 D" l; X( ?, [! s: V' ~+ g i9 O![]()
# I6 n. c6 j! Z, Q( _. ~/ [+ a. J1 V) j. L8 b
纯 JavaScript + HTML5 Canvas 生成的交互动画，难以置信。% C) X4 k/ J6 D: ~
8 T3 q+ J7 N! m# \7 q' f2 `! a1 e! j A J; ~' a
The Mesmerizer) P0 |0 m+ P& ^
1 |/ ~7 o% J: b$ v# N0 I8 C N
![]()
' Z3 g' k' F/ k$ K4 o4 H0 W7 }. a7 Y% I
在格子中移动鼠标，颜色随着改变并扩散到周围的格子，很迷幻。用鼠标点四角的格子，或按键盘，可以看到更奇妙的效果。( B( S5 P% Q* C4 { k
6 F2 J: M7 X n2 @0 d
Burn7 s- ]- j3 s) q/ \( P' h5 z% J+ ]
![]() * [! Q* }% V4 g0 B, ~; U8 u
' \/ X" I | B2 W; d* ^" e! o2 O& i2 P9 b
在页面上移动鼠标，或按下鼠标，这样的效果，很难相信是浏览器原生的。
* I2 j" f% c- ~/ O5 h" H3 k/ k/ P" J7 D
Cheloniidae Live- V% M* ?- ~( d4 s% m6 t* J* N
& x! I/ v" ~( n
![]() i' w* C8 t6 B z- ^
5 Q; |0 p2 g+ R* [, F
也是基于纯粹的 JavaScript，不过使用了一个 JavaScript 库。很有趣，你可以通过修改其 JavaScript 代码实现自己的效果（可惜被墙了）。1 Y1 m0 n0 k) k1 E
8 V3 E6 b8 d# e
& y& ]' a! j) w( X6 RCanvas 3D engine9 o- ^2 [: w: d
6 y7 q2 }/ W5 o. ?
![]() 4 z: P5 \$ N, k( r3 x
; ]" v m6 M3 T& D* I* m1 q
一个基于 Canvas 的 3D 引擎。目前只支持预设的图形，纹理及基本交互功能。" W' u; X. @# r- X+ |& F
) h. C2 D2 n& }. J
" I& z# \+ p, c% l h; h9 |
Bomomo
6 A$ y2 c# e" d
& C; j) x8 k7 P6 }( {![]()
$ C9 ]4 \7 J/ T4 p6 i9 V7 F, a9 {$ E( T2 @3 B' e
很值得一试。' w2 d W+ I: ?8 W
/ p% W _$ y% W
" A7 o; V6 L8 ~' i8 P' F
DDD
- X* K. D6 L( v; G# m1 X5 Q2 G
9 i; @1 f m. _$ l2 R2 l5 {7 M* ?8 X![]() ' L8 O( h2 I9 e* _$ H- L2 n6 C
4 s1 N. [* c+ V
这个交互动画也很有趣。
+ \5 r7 g1 o! z, g0 O( d c( i* l% P6 \9 l4 W9 I
! c& [1 `2 k: B" u( L! t- n, r0 E6 i6 ^0 t
Plasma Tree
2 ^2 ?+ P |2 l- M. j
! _$ j* L$ I* r2 j![]()
* R) ?- e( E) l
$ k3 L5 Z& u5 J; x( C, h; [% u非常阿凡达。 |
|
/1 
IP卡
狗仔卡
发表于 2010-6-28 14:49:28
QQ好友和群
QQ空间
腾讯微博
腾讯朋友
收藏
分享
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
抢沙发
千斤顶
显身卡
发表于 2010-7-22 10:35:25