7款让人惊叹的HTML5粒子动画特效

   <p>HTML5的很大一个优势就是可以更加便捷高效地制作网页粒子动画特效，特别是Canvas特性，可以实现在网页上绘制任何图形和动画。本文要分享7款让人惊叹的HTML5粒子动画特效，这些粒子特效都提供源代码下载供大家学习。</p>    <h2><strong>1、HTML5 Canvas粒子模拟效果</strong></h2>    <p>这是一款利用HTML5 Canvas模拟出来的30000个粒子动画，当你用鼠标在canvas画布上移动时，鼠标周围的一些粒子就会跟着你移动，并形成一定的图案，就像你在玩沙画一样，效果非常不错。这里，我们应用了一些HTML5的特性，让这个粒子动画显得相当动感。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/2ab15cd8879410bbc020ed59919d6e51.jpg"></p>    <p style="text-align: center;"><a href="/misc/goto?guid=4958836266867192816" rel="nofollow,noindex">在线演示</a> </p>    <h2><strong>2、HTML5火焰文字特效</strong></h2>    <p>今天我们分享的这款HTML5文字特效是火焰燃烧的效果，比较消耗CPU，但是动画效果还是比较酷的。另外，再推荐一款HTML5文字特效： <a href="/misc/goto?guid=4958978692234684499" rel="nofollow,noindex">HTML5像素文字爆炸重组动画特效</a></p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/6f8b952493d45b6521c5a7c49ebbd49e.jpg"></p>    <p style="text-align: center;"><a href="/misc/goto?guid=4958833200368950512" rel="nofollow,noindex">在线演示</a></p>    <h2><strong>3、HTML5 Canvas粒子效果文字动画特效</strong></h2>    <p>之前我们分享过很多超酷的 <a href="/misc/goto?guid=4958978692432089101" rel="nofollow,noindex">文字特效</a> ，其中也有利用HTML5和CSS3的。今天我们要来分享一款基于HTML5 Canvas的文字特效，输入框中输入想要展示的文字，回车后即可在canvas上绘制出粒子效果的文字动画，相当酷的动画效果。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/f6d9a8795c9e2f0b59b73339f1b2d0c2.jpg"></p>    <p style="text-align: center;"><a href="/misc/goto?guid=4958836592098826845" rel="nofollow,noindex">在线演示</a></p>    <h2><strong>4、HTML5 Canvas生成粒子效果的人物头像</strong></h2>    <p>今天我们要再利用HTML5 Canvas实现一个粒子效果的人物头像，你可以任意选择一张头像图片，接下来该图片会被打散成许多粒子，然后慢慢的重组成图片，鼠标滑过图片时粒子还会出现浮动的动画特效，看上去非常酷。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/023f1bf5940f80e54e880d3bdee9b4d8.png"></p>    <p style="text-align: center;"><a href="/misc/goto?guid=4958978692621767682" rel="nofollow,noindex">在线演示</a></p>    <h2><strong>5、HTML5粒子效果的文字动画特效</strong></h2>    <p>今天要分享的也是一款基于HTML5的粒子效果的文字动画特效，并且它可以实现每个文字的逐帧播放，形成一句很浪漫的诗句。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/d7688231c920bcadc83f4d578944c6ae.png"></p>    <p style="text-align: center;"><a href="/misc/goto?guid=4958861798330313761" rel="nofollow,noindex">在线演示</a></p>    <h2><strong>6、HTML5 3D 粒子波浪动画特效</strong></h2>    <p>今天我们要在来分享一款升级版 <a href="/misc/goto?guid=4958833803411821282" rel="nofollow,noindex">HTML5</a> 3D粒子波浪动画特效，我们可以旋转不同的视角来欣赏粒子波浪的滚动特效。HTML5在动画制作方面的确让人眼前一亮。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/9f9f8d92b4a9b9faf666e28b4bbd87d6.png"></p>    <p style="text-align: center;"><a href="/misc/goto?guid=4958867077831490128" rel="nofollow,noindex">在线演示</a></p>    <h2><strong>7、HTML5 Canvas 3D 倒计时爆炸特效</strong></h2>    <p>今天要分享的这款 HTML5 3D 动画特效非常给力，它是一个基于Canvas 的倒计时爆炸效果，随着时间的走动，时间数字傍边就会有爆炸的特效，一群像素点就会在数字中心爆发出来，感觉非常酷。而且应用了 HTML5 的 3D 特性，让整一个时钟显得非常有立体感。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/8168aff8ce74b4a0f7dde975314ff555.jpg"></p>    <p style="text-align: center;"><a href="/misc/goto?guid=4958836092088692177" rel="nofollow,noindex">在线演示</a></p>    <p>以上就是7款让人惊叹的HTML5粒子动画特效，希望你会喜欢。</p>    <p> </p>    <p>来自：http://www.androidchina.net/5515.html</p>    <p> </p>