7款超华丽的HTML5 Canvas文字动画特效

   <p>文字是网页中最为常见的元素之一，当然我们使用最多的就是调整文字的颜色、大小等基本属性。有时候我们在一些活动页面上需要展示特别样式的文字效果，这时候我们就可以利用 <a href="/misc/goto?guid=4958833803411821282" rel="nofollow,noindex">HTML5</a> 或者CSS3结合的方式来渲染文字的动画特效。本文就总结了7款超华丽的HTML5 Canvas文字动画特效，可以让你的页面更加的活灵活现，充满梦幻的色彩。</p>    <h2>1、HTML5 Canvas幻彩火焰文字特效</h2>    <p>之前我们分享过很多基于HTML5 Canvas的火焰渲染动画特效，比如这款 <a href="/misc/goto?guid=4958862335608859389" rel="nofollow,noindex">HTML5 Canvas炫酷的火焰风暴动画</a> 和这个 <a href="/misc/goto?guid=4958860421194199163" rel="nofollow,noindex">HTML5动感的火焰燃烧动画特效</a> 。这次来分享一款很特别的HTML5文字特效，文字同时是利用火焰来渲染的，并且燃烧的文字火焰还可以随时改变颜色，让文字更显幻彩。</p>    <p><img src="https://simg.open-open.com/show/1e885443d23d5aa29259e4fb9dc11207.png"></p>    <p><a href="/misc/goto?guid=4959755344775433030" rel="nofollow,noindex">在线演示</a> /    <a href="/misc/goto?guid=4959755344869252401" rel="nofollow,noindex">源码下载</a></p>    <h2>2、超华丽CSS3 3D五彩发光文字动画</h2>    <p>不久前我们已经为大家介绍过一些炫酷的CSS3文字动画和HTML5文字特效，有些都非常不错，比如最近刚分享的CSS3文字跳动旋转动画以及 <a href="/misc/goto?guid=4959755344869252401" rel="nofollow,noindex">HTML5 Canvas幻彩火焰文字特效</a> 。这次我们要来看一款纯CSS3实现的3D五彩发光文字动画，文字呈现3D立体的视觉效果，同时定时会变换字体颜色，并且文字周围微微带有发光的效果，这样就更加体现出3D的动画效果了。</p>    <p><img src="https://simg.open-open.com/show/dec110702b7ae68e9026505e784ad6b9.png"></p>    <p><a href="/misc/goto?guid=4959755347772467178" rel="nofollow,noindex">在线演示</a> /    <a href="/misc/goto?guid=4959755347864330254" rel="nofollow,noindex">源码下载</a></p>    <h2>3、HTML5像素文字爆炸重组动画特效</h2>    <p>HTML5可以把文字效果做得非常酷，就像之前分享的HTML5/CSS3发光文字和 <a href="/misc/goto?guid=4959755347955916591" rel="nofollow,noindex">HTML5/CSS3文字投影特效</a> 就非常绚丽。今天我们要分享一款基于HTML5技术的文字像素爆炸重组动画特效，我们可以在输入框中指定任意文字，点击确定按钮后，就会将原先的文字爆炸散去，新的文字以像素点的形式组合起来，看起来非常棒。</p>    <p><img src="https://simg.open-open.com/show/504ac4062661a41b5431a9331857970e.jpg"></p>    <p><a href="/misc/goto?guid=4958961303959851261" rel="nofollow,noindex">在线演示</a> /    <a href="/misc/goto?guid=4958978692234684499" rel="nofollow,noindex">源码下载</a></p>    <h2>4、HTML5粒子效果的文字动画特效</h2>    <p>记得之前向大家分享过一款 <a href="/misc/goto?guid=4958859047613698293" rel="nofollow,noindex">HTML5 Canvas实现会跳舞的时间动画</a> ，利用了HTML5的粒子动画特性。今天要分享的也是一款基于HTML5的粒子效果的文字动画特效，并且它可以实现每个文字的逐帧播放，形成一句很浪漫的诗句。</p>    <p><img src="https://simg.open-open.com/show/d7688231c920bcadc83f4d578944c6ae.png"></p>    <p><a href="/misc/goto?guid=4958861798330313761" rel="nofollow,noindex">在线演示</a> /    <a href="/misc/goto?guid=4958861798454848955" rel="nofollow,noindex">源码下载</a></p>    <h2>5、HTML5 Canvas文字粒子动画 可自定义文字内容</h2>    <p>之前我们分享过一些关于HTML5的粒子动画，有文字粒子动画，比如这款 <a href="/misc/goto?guid=4958836592217340677" rel="nofollow,noindex">HTML5 Canvas粒子效果文字动画特效</a> 就非常不错。今天要分享的也是一款基于HTML5 Canvas的文字粒子动画特效，我们可以自定义文字的内容、粒子的半径、粒子重力方向、粒子抖动频率等，看起来非常强大和炫酷。</p>    <p><img src="https://simg.open-open.com/show/823c729e76ae2a4f525ae32ac28bfbc4.png"></p>    <p><a href="/misc/goto?guid=4959755348310558004" rel="nofollow,noindex">在线演示</a> /    <a href="/misc/goto?guid=4959755348389874431" rel="nofollow,noindex">源码下载</a></p>    <h2>6、HTML5 Canvas粒子效果文字动画特效</h2>    <p>之前我们分享过很多超酷的文字特效，其中也有利用HTML5和CSS3的。今天我们要来分享一款基于HTML5 Canvas的文字特效，输入框中输入想要展示的文字，回车后即可在canvas上绘制出粒子效果的文字动画，相当酷的动画效果。</p>    <p><img src="https://simg.open-open.com/show/f6d9a8795c9e2f0b59b73339f1b2d0c2.jpg"></p>    <p><a href="/misc/goto?guid=4958836592098826845" rel="nofollow,noindex">在线演示</a> /    <a href="/misc/goto?guid=4958836592217340677" rel="nofollow,noindex">源码下载</a></p>    <h2>7、HTML5 Canvas 3D球形文字标签云动画</h2>    <p>个人博客程序中经常会使用的一个功能叫标签云，就是把许多标签文字提取出来，使用云的形式将这些标签展示给读者。今天要分享的就是一款基于HTML5 Canvas的3D球形标签云动画，你可以定义任意的文字，然后调用HTML5代码初始化一个3D的球形标签云，效果非常不错。</p>    <p><img src="https://simg.open-open.com/show/ee5530cd9a26964f1a320e21a620585c.png"></p>    <p><a href="/misc/goto?guid=4959755348528157286" rel="nofollow,noindex">在线演示</a> /    <a href="/misc/goto?guid=4959755348621558855" rel="nofollow,noindex">源码下载</a></p>    <p> </p>    <p>来自：http://www.html5tricks.com/7-wonderful-html5-canvas-text.html</p>    <p> </p>