TA的每日心情 | 擦汗 昨天 15:31 |
---|
签到天数: 2396 天 [LV.Master]伴坛终老
|
HTML5 的 Canvas 对象将改变 JavaScript 的使命,使之成为 HTML5 下强大的动画脚本编写工具。本文介绍了 8 个你从未见过的,基于 HTML5 Canvas 和 JavaScript 的动画,这些令人难以置信的效果将使你对 HTML5 彻底折服。需要指出的是,这些都是浏览器的原生动画,无需任何插件。Tunnelers1 i! T; R3 ~5 L
" z7 L: L( e5 ], ^
/ Z. }* z# ~. U5 c6 r0 m' \" `, B) y$ E- V4 s
纯 JavaScript + HTML5 Canvas 生成的交互动画,难以置信。
1 ]5 T1 d j# ~. X8 c* D- ~* d* i8 t1 k+ N' u& _( ^0 }
) H6 I! a- j/ OThe Mesmerizer* k; K u& _8 o. u \! p+ n- S/ u
$ b1 v$ f9 A$ S' z& p5 V( l6 b- U3 G7 g2 ~+ ~- z
) y' y/ [; h. @8 D" v2 M' B# D8 P在格子中移动鼠标,颜色随着改变并扩散到周围的格子,很迷幻。用鼠标点四角的格子,或按键盘,可以看到更奇妙的效果。2 w; |7 K2 \, G" @- u# \, \
: A. ?3 z) g* `# |4 L) I7 _# `
Burn
) w7 Y5 H) w% {4 X" f0 X/ f8 c0 Y' s" w6 ?: T6 o/ m
2 y% @% v9 m M* G; k
+ z% L1 r' b* Z
在页面上移动鼠标,或按下鼠标,这样的效果,很难相信是浏览器原生的。 f H( y5 a! ~4 k! x5 p: U, C
) _' P& \ b" Z7 M3 C- i! v/ Z7 S
Cheloniidae Live! z7 R. W' L% O+ _( ~+ E. r
& e, f; [9 h1 F% f
- r. O. A. [0 K4 G/ a1 B: p9 F, E7 R v- s* B' j$ i
也是基于纯粹的 JavaScript,不过使用了一个 JavaScript 库。很有趣,你可以通过修改其 JavaScript 代码实现自己的效果(可惜被墙了)。 p; |: o! k% V$ b' j( L+ s
% h- A0 ?" |0 A: q, A! [; q
. E6 `& q8 b" Y! n
Canvas 3D engine
4 s+ V! Q% l# @& i/ \
$ }5 N4 `2 C5 O5 x' i- U" x5 T4 z3 n8 M$ c$ W# x% ]5 I/ ^
( i5 w+ i2 H. e. L _一个基于 Canvas 的 3D 引擎。目前只支持预设的图形,纹理及基本交互功能。
5 ^9 ~' ^7 W* C1 v
+ t" A6 E8 I/ ?- f# J" e( K8 G& v2 v6 c
Bomomo
; b0 E; r" J2 ~# `- \! [4 X$ j/ [ A: v
' e& Q: v/ ^; r; o& r: t# i4 O
7 z. s. v" Y0 X+ \; o! ^" V% D
很值得一试。. e0 F: z/ L4 B7 t) C1 j
+ S0 |" ]1 L8 v# l" v7 k9 X2 Q! n! i) E" |
% B5 i. f! U3 }- ^# O ]DDD4 h1 B4 q, d: \2 g
6 n# [8 g) Z3 b) z3 R+ n1 p( c' s L' A7 I# N
/ x2 I% L% d$ ]: Y这个交互动画也很有趣。6 L7 o2 Z" k# v* J
# X+ ?* ?" _5 \+ M* X+ X
7 V$ r. t6 E+ s0 d CPlasma Tree
# W, p6 W8 ~* u1 Z( @ H2 Z% W ]: S8 z' L% K- G2 g
: x0 v+ _8 k! ^4 |$ i/ C
2 _" ~ `; ?2 }' O2 d6 V: d非常阿凡达。 |
|