10个HTML5特效经典案例

1. 粒子特效

星际传奇：这是探索宇宙的门票

百度百科：为模拟现实中的水、火、雾、气等效果由各种三维软件开发的制作模块，原理是将无数的单个粒子组合使其呈现出固定形态，借由控制器，脚本来控制其整体或单个的运动，模拟出现真实的效果。

2. SVG路径动画

元小望：SVG练习NO.1_描述孤独

简而言之，就是让SVG的描边像是有人绘制一样的动画效果。动画轻巧不失真，特别适合那些崇尚简约设计风格的网页。

上作品是派友（Epub360用户）元小望用Epub360设计制作的，大家感受下，是不是很酷！

3. 序列帧动画

大众点评：我们之间只有一个字

百度百科：序列帧动画是只在时间轴的每帧上逐帧绘制不同的内容，使其连续播放而成动画。因为逐帧动画的帧序列内容不一样，不但给制作增加了负担而且最终输出的文件量也很大，但它的优势也很明显：逐帧动画具有非常大的灵活性，几乎可以表现任何想表现的内容，而它类似与电影的播放模式，很适合于表演细腻的动画。例如：人物或动物急剧转身、头发及衣服的飘动、走路、说话以及精致的3D效果等等。

派友晗萧模仿原版用Epub360制作了“我们之间只有一个字”的优化版，大家看看Epub360序列帧组件性能如何？

4. 全线性动画

腾讯UP大会：生命之下，想象之上

全线性动画可以理解为动画连续，几乎不间断播放，像视频一样流畅细腻。

这支HTML5页面打破了传统幻灯片式的呈现方式，塑造出了一种宽广、素雅、幽静的整体感受，该作品也被很多人推崇为HTML5里的动画片。

5. Cinemagraphic

Levi’s: “换”醒你的夏天

什么是Cinemegraphic？如果你不知道，就有点OUT了。顾名思义，Cinema是电影摄影，Graph是图片，Cinemagraphic是一项将神奇的局部运动赋予静态照片的新技术。

其中Cinemagraphic的应用恰到好处地了诠释了“自然风”的概念，只见画面上，人物的头发和衣角飞舞着，仿佛吹拂着一阵阵自然风，在炎炎夏日，他们依旧感受着清爽，尽情玩耍。作为互动者的人们，当看到画面上被风拂过的Cinemagraphic动态场景，他们也身临其境地感受到自然风所能带来的这种清爽感受。

下面说说和交互相关的动画特效。

6. 全景

杜蕾斯的第一座美术馆

虚拟全景美术馆的概念并不新鲜。其鼻祖应该是 Google 的 Art Project，让你能够在线浏览全世界大多数博物馆和美术馆。杜蕾斯“美术馆”的创新，在于它其实是热门广告形式HTML5页面的伪装。“我们想要通过多重手段（比如馆内的彩蛋、12 点闭馆无法访问等等）来创造一个虚拟的真实空间，而不是传统HTML5的单线程教育的逻辑。” Socialab 杜蕾斯组的负责人说，“液体主义群展将是杜蕾斯美术馆无数展览中的第一个。”