标签归档:CreateJS

HTML5 Canvas火焰文字动画特效

HTML5技术确实挺强大的,特别是Canvas画布更是让网页动画变得丰富多彩。今天我们分享的是一款基于HTML5 Canvas的火焰文字动画特效,它可以让任意文字上方冒出密集的火焰,就像这些文字在熊熊燃烧一样。与这款火焰动画类似的还有以前分享的HTML5 Canvas幻彩火焰文字特效

html5-canvas-fire-text-animation

在线演示源码下载

接下来我们一起来看看如何实现这款炫酷的HTML5 Canvas火焰文字动画特效。

HTML代码

由于是基于Canvas的,所有的动画细节都在Canvas上绘制实现,因此html代码就非常简单,仅仅提供一个canvas元素即可。代码如下:

<canvas id="canvas" width="1024" height="600"></canvas>

别看这简单的一个元素,它结合CSS3和JavaScript可以实现非常复杂的动画。

CSS3代码

CSS代码也没有什么特别,仅仅是定义Canvas的背景颜色:

canvas {
  background-color:#000000;
  left: 0;
}

JavaScript代码

[......]

阅读全文>>