TA的每日心情 | 奋斗 昨天 08:43 |
---|
签到天数: 2391 天 [LV.Master]伴坛终老
|
HTML5 的 Canvas 对象将改变 JavaScript 的使命,使之成为 HTML5 下强大的动画脚本编写工具。本文介绍了 8 个你从未见过的,基于 HTML5 Canvas 和 JavaScript 的动画,这些令人难以置信的效果将使你对 HTML5 彻底折服。需要指出的是,这些都是浏览器的原生动画,无需任何插件。Tunnelers
$ i0 h- G4 ~& s
! q# Q6 \# _! ^( p4 Z* C+ h1 K3 y6 D. y" b
- Z$ k+ m3 u; z t' u( T4 Y# L. B
纯 JavaScript + HTML5 Canvas 生成的交互动画,难以置信。1 Q2 x1 m& u- ^+ Y1 V
/ O" [# a, e& `' @7 a" S' N) u( N0 M
The Mesmerizer2 w7 J+ O/ l9 }- E$ Q
8 z& K \5 B) e1 H& F& ~+ H9 Y5 s' j) ^6 {
0 `, d) j# W; J. j6 X) [* T
在格子中移动鼠标,颜色随着改变并扩散到周围的格子,很迷幻。用鼠标点四角的格子,或按键盘,可以看到更奇妙的效果。
0 j2 M- d0 v4 @: y% m; Z; A/ |7 w" ?) d" ]5 V' j1 n; o. a6 W
Burn% w+ U h9 U- S4 P( Z
: x' g; J# b" O0 j3 P2 X7 F5 p4 ]8 K( K( j/ b
0 L7 ?) u/ ~7 |8 v4 e
在页面上移动鼠标,或按下鼠标,这样的效果,很难相信是浏览器原生的。, o5 @4 s* W( U; [+ r' f1 o
: U L: z; j, ~3 m/ E# ?9 Z CCheloniidae Live
. J9 t- t9 j/ U+ o/ n0 B$ G! q9 D7 a/ y" i1 ^! d, [
6 T+ a) I% s; p( Q$ b. O* q
6 Z* C6 [3 ?. t% o; B4 |1 e- ^
也是基于纯粹的 JavaScript,不过使用了一个 JavaScript 库。很有趣,你可以通过修改其 JavaScript 代码实现自己的效果(可惜被墙了)。) t: d& R; d0 m; I
/ X' {5 g1 \( L+ v5 @5 n% K
& e. u5 W7 c" Q$ }3 n/ }/ F+ G4 pCanvas 3D engine
, d) c! E- o H8 U7 ~
9 s' |3 l4 W$ I) v7 n$ ~2 k3 M6 B$ {
* j8 ^ H6 G$ V1 ?
x6 F7 ~& O7 }$ P9 R; Y一个基于 Canvas 的 3D 引擎。目前只支持预设的图形,纹理及基本交互功能。
& m7 z5 |% _1 n# N4 x" H; K& \) r( F6 W
; _6 y% g# W" l* C/ mBomomo
' ^* o) o$ Z1 M! m# A& [9 B! x* q, K" F( V. ^% f' j- o- o
4 A/ C6 R8 |1 t5 [' t
4 l' k0 V. i, ~3 A7 w" ]很值得一试。$ _1 p- b8 ~: }' F
( x9 `* H @4 x: K0 S# I. G, A9 a4 f9 B. g9 M1 n7 P- V4 s
DDD: l9 W% m; r! H+ G
9 G) g5 V) ]. a* Y1 w# X" |1 U% y# h) o- n! B; q6 r! j7 Q! F- D5 p
" l6 C# W: i1 o% [- d这个交互动画也很有趣。
3 G t! c/ d& O% H% v1 ~2 y
- @. e$ w$ |9 ~+ y# [: @6 R1 B ~) h0 k
" X3 l$ w& L' @5 B0 WPlasma Tree
- x# \ Y( ^- M( Z
; h4 a9 s% m/ F, o2 l( b' q, s$ j8 a. e* j0 r7 J) J
1 a- M" B7 j2 U6 S2 `9 \/ Y+ P非常阿凡达。 |
|