[CSS3技术]CSS3火焰文字特效制作教程

[tr][td] 用一句很俗气的话概括这两天的情况就是：“最近很忙”，虽然手头上有不少很酷的HTML5和CSS3资源，但确实没时间将它们的实现过程写成教程分享给大家。今天刚完成了一个神秘的项目，空下来来博客园写点东西。今天给大家分享2个CSS3火焰文字特效，并且将实现的思路和核心代码写成教程分享给大家。

第一个是静态的火焰文字效果，先看看效果图：







看着图的效果很酷吧。

同时你也可以在这里查看火焰文字的DEMO演示。

下面是实现的源码，由于是静态的文字效果，所以代码相当比较简单。

HTML代码，就一个h1标签：

[*]HTML5 Tricks

复制代码




然后是CSS3代码：

[*]#fire{
[*]text-align: center;
[*]margin: 100px auto;
[*]font-family: "Comic Sans MS";
[*]font-size: 80px;
[*]color: white;
[*]text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e;
[*]
[*]}
[*]
[*]body {background:black; }

复制代码




这里简单说一下，主要是用了CSS3的text-shadow属性实现文字阴影，这里定义了7层的层叠阴影，用阶梯变化的颜色和一定的阴影半径模拟出火焰从里到外的颜色渐变。





第二个是带动画的火焰文字特效，说实话，和上一个相比，这个不怎么像火焰，但我还是称它火焰吧。先来看看效果图：







看看，是不是很大气。

要看动起来的效果，可以查看DEMO演示。

然后再分析一下源代码，由于涉及到CSS3动画，所以利用了JS代码动态改变CSS样式。

先是HTML代码，构造了一个div容器：

[*]

复制代码




下面是JS代码：





<div class="blockcode"><div id="code_cY0"><ol>function Stats()

{

 this.init();

}



Stats.prototype =

 {

 init: function()

 {

 this.frames = 0;

 this.framesMin = 100;

 this.framesMax = 0;



 this.time = new Date().getTime();

 this.timePrev = new Date().getTime();



 this.container = document.createElement("div");

 this.container.style.position = 'absolute';

 this.container.style.fontFamily = 'Arial';

 this.container.style.fontSize = '10px';

 this.container.style.backgroundColor = '#000020';

 this.container.style.opacity = '0.9';

 this.container.style.width = '80px';

 this.container.style.paddingTop = '2px';



 this.framesText = document.createElement("div");

 this.framesText.style.color = '#00ffff';

 this.framesText.style.marginLeft = '3px';

 this.framesText.style.marginBottom = '3px';

 this.framesText.innerHTML = 'FPS';

 this.container.appendChild(this.framesText);



 this.canvas = document.createElement("canvas");

 this.canvas.width = 74;

 this.canvas.height = 30;

 this.canvas.style.display = 'block';

 this.canvas.style.marginLeft = '3px';

 this.canvas.style.marginBottom = '3px';

 this.container.appendChild(this.canvas);



 this.context = this.canvas.getContext("2d");

 this.context.fillStyle = '#101030';

 this.context.fillRect(0, 0, this.canvas.width, this.canvas.height );



 this.contextImageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);



 setInterval( bargs( function( _this ) { _this.update(); return false; }, this ), 1000 );

 },



 getDisplayElement: function()

 {

 return this.container;

 },



 tick: function()

 {

 this.frames++;

 },



 update: function()

 {

 this.time = new Date().getTime();



 this.fps = Math.round((this.frames * 1000 ) / (this.time - this.timePrev)); //.toPrecision(2);



 this.framesMin = Math.min(this.framesMin, this.fps);

 this.framesMax = Math.max(this.framesMax, this.fps);



 this.framesText.innerHTML = '' + this.fps + ' FPS (' + this.framesMin + '-' + this.framesMax + ')';



 this.contextImageData = this.context.getImageData(1, 0, this.canvas.width - 1, 30);

 this.context.putImageData(this.contextImageData, 0, 0);



 this.context.fillStyle = '#101030';

 this.context.fillRect(this.canvas.width - 1, 0, 1, 30);



 this.index = ( Math.floor(30 - Math.min(30, (this.fps / 60) * 30)) );



 this.context.fillStyle = '#80ffff';

 this.context.fillRect(this.canvas.width - 1, this.index, 1, 1);



 this.context.fillStyle = '#00ffff';

 this.context.fillRect(this.canvas.width - 1, this.index + 1, 1, 30 - this.index);



 this.timePrev = this.time;

 this.frames = 0;

 }

}



// Hack by Spite



function bargs( _fn )

{

 var args = [];

 for( var n = 1; n < arguments.length; n++ )

 args.push( arguments[ n ] );

 return function () { return _fn.apply( this, args ); };

}





(function (window){



 var Sakri = window.Sakri || {};

 window.Sakri = window.Sakri || Sakri;



 Sakri.MathUtil = {};



 //return number between 1 and 0

 Sakri.MathUtil.normalize = function(value, minimum, maximum){

 return (value - minimum) / (maximum - minimum);

 };



 //map normalized number to values

 Sakri.MathUtil.interpolate = function(normValue, minimum, maximum){

 return minimum + (maximum - minimum) * normValue;

 };



 //map a value from one set to another

 Sakri.MathUtil.map = function(value, min1, max1, min2, max2){

 return Sakri.MathUtil.interpolate( Sakri.MathUtil.normalize(value, min1, max1), min2, max2);

 };





 Sakri.MathUtil.hexToRgb = function(hex) {

 // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")

 var shorthandRegex = /^#?([a-fd])([a-fd])([a-fd])$/i;

 hex = hex.replace(shorthandRegex, function(m, r, g, b) {

 return r + r + g + g + b + b;

 });



 var result = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex);

 return result ? {

 r: parseInt(result[1], 16),

 g: parseInt(result[2], 16),

 b: parseInt(result[3], 16)

 } : null;

 }



 Sakri.MathUtil.getRandomNumberInRange = function(min, max){

 return min + Math.random() * (max - min);

 };



 Sakri.MathUtil.getRandomIntegerInRange = function(min, max){

 return Math.round(Sakri.MathUtil.getRandomNumberInRange(min, max));

 };





}(window));





//has a dependency on Sakri.MathUtil



(function (window){



 var Sakri = window.Sakri || {};

 window.Sakri = window.Sakri || Sakri;



 Sakri.Geom = {};



 //==================================================

 //=====================::POINT::====================

 //==================================================



 Sakri.Geom.Point = function (x,y){

 this.x = isNaN(x) ? 0 : x;

 this.y = isNaN(y) ? 0 : y;

 };



 Sakri.Geom.Point.prototype.clone = function(){

 return new Sakri.Geom.Point(this.x,this.y);

 };



 Sakri.Geom.Point.prototype.update = function(x, y){

 this.x = isNaN(x) ? this.x : x;

 this.y = isNaN(y) ? this.y : y;

 };





 //==================================================

 //===================::RECTANGLE::==================

 //==================================================



 Sakri.Geom.Rectangle = function (x, y, width, height){

 this.update(x, y, width, height);

 };



 Sakri.Geom.Rectangle.prototype.update = function(x, y, width, height){

 this.x = isNaN(x) ? 0 : x;

 this.y = isNaN(y) ? 0 : y;

 this.width = isNaN(width) ? 0 : width;

 this.height = isNaN(height) ? 0 : height;

 };



 Sakri.Geom.Rectangle.prototype.getRight = function(){

 return this.x + this.width;

 };



 Sakri.Geom.Rectangle.prototype.getBottom = function(){

 return this.y + this.height;

 };



 Sakri.Geom.Rectangle.prototype.getCenter = function(){

 return new Sakri.Geom.Point(this.getCenterX(), this.getCenterY());

 };



 Sakri.Geom.Rectangle.prototype.getCenterX = function(){

 return this.x + this.width/2;

 };



 Sakri.Geom.Rectangle.prototype.getCenterY=function(){

 return this.y + this.height/2;

 };



 Sakri.Geom.Rectangle.prototype.containsPoint = function(x, y){

 return x >= this.x && y >= this.y && x  width){

 while(context.measureText(string).width > width){

 copy.fontSize--;

 context.font = copy.getFontString();

 if(copy.fontSize < 0){

 console.log("getFontSizeForWidth() min fontsize reached");

 return null;

 }

 }

 }

 //console.log("getFontSizeForWidth() 2 : ", copy.fontSize);

 return copy.fontSize;

 };





 //=========================================================================================

 //==============::CANVAS TEXT PROPERTIES::====================================

 //========================================================



 Sakri.CanvasTextProperties = function(fontWeight, fontStyle, fontSize, fontFace){

 this.setFontWeight(fontWeight);

 this.setFontStyle(fontStyle);

 this.setFontSize(fontSize);

 this.fontFace = fontFace ? fontFace : "sans-serif";

 };



 Sakri.CanvasTextProperties.NORMAL = "normal";

 Sakri.CanvasTextProperties.BOLD = "bold";

 Sakri.CanvasTextProperties.BOLDER = "bolder";

 Sakri.CanvasTextProperties.LIGHTER = "lighter";



 Sakri.CanvasTextProperties.ITALIC = "italic";

 Sakri.CanvasTextProperties.OBLIQUE = "oblique";





 Sakri.CanvasTextProperties.prototype.setFontWeight = function(fontWeight){

 switch (fontWeight){

 case Sakri.CanvasTextProperties.NORMAL:

 case Sakri.CanvasTextProperties.BOLD:

 case Sakri.CanvasTextProperties.BOLDER:

 case Sakri.CanvasTextProperties.LIGHTER:

 this.fontWeight = fontWeight;

 break;

 default:

 this.fontWeight = Sakri.CanvasTextProperties.NORMAL;

 }

 };



 Sakri.CanvasTextProperties.prototype.setFontStyle = function(fontStyle){

 switch (fontStyle){

 case Sakri.CanvasTextProperties.NORMAL:

 case Sakri.CanvasTextProperties.ITALIC:

 case Sakri.CanvasTextProperties.OBLIQUE:

 this.fontStyle = fontStyle;

 break;

 default:

 this.fontStyle = Sakri.CanvasTextProperties.NORMAL;

 }

 };



 Sakri.CanvasTextProperties.prototype.setFontSize = function(fontSize){

 if(fontSize && fontSize.indexOf && fontSize.indexOf("px")>-1){

 var size = fontSize.split("px")[0];

 fontProperites.fontSize = isNaN(size) ? 24 : size;//24 is just an arbitrary number

 return;

 }

 this.fontSize = isNaN(fontSize) ? 24 : fontSize;//24 is just an arbitrary number

 };



 Sakri.CanvasTextProperties.prototype.clone = function(){

 return new Sakri.CanvasTextProperties(this.fontWeight, this.fontStyle, this.fontSize, this.fontFace);

 };



 Sakri.CanvasTextProperties.prototype.getFontString = function(){

 return this.fontWeight + " " + this.fontStyle + " " + this.fontSize + "px " + this.fontFace;

 };



}(window));





window.requestAnimationFrame =

 window.__requestAnimationFrame ||

 window.requestAnimationFrame ||

 window.webkitRequestAnimationFrame ||

 window.mozRequestAnimationFrame ||

 window.oRequestAnimationFrame ||

 window.msRequestAnimationFrame ||

 (function () {

 return function (callback, element) {

 var lastTime = element.__lastTime;

 if (lastTime === undefined) {

 lastTime = 0;

 }

 var currTime = Date.now();

 var timeToCall = Math.max(1, 33 - (currTime - lastTime));

 window.setTimeout(callback, timeToCall);

 element.__lastTime = currTime + timeToCall;

 };

 })();



var readyStateCheckInterval = setInterval( function() {

 if (document.readyState === "complete") {

 clearInterval(readyStateCheckInterval);

 init();

 }

}, 10);



//========================

//general properties for demo set up

//========================



var canvas;

var context;

var canvasContainer;

var htmlBounds;

var bounds;

var minimumStageWidth = 250;

var minimumStageHeight = 250;

var maxStageWidth = 1000;

var maxStageHeight = 600;

var resizeTimeoutId = -1;

var stats;



function init(){

 canvasContainer = document.getElementById("canvasContainer");

 window.onresize = resizeHandler;

 stats = new Stats();

 canvasContainer.appendChild( stats.getDisplayElement() );

 commitResize();

}



function getWidth( element ){return Math.max(element.scrollWidth,element.offsetWidth,element.clientWidth );}

function getHeight( element ){return Math.max(element.scrollHeight,element.offsetHeight,element.clientHeight );}



//avoid running resize scripts repeatedly if a browser window is being resized by dragging

function resizeHandler(){

 context.clearRect(0,0,canvas.width, canvas.height);

 clearTimeout(resizeTimeoutId);

 clearTimeoutsAndIntervals();

 resizeTimeoutId = setTimeout(commitResize, 300 );

}



function commitResize(){

 if(canvas){

 canvasContainer.removeChild(canvas);

 }

 canvas = document.createElement('canvas');

 canvas.style.position = "absolute";

 context = canvas.getContext("2d");

 canvasContainer.appendChild(canvas);



 htmlBounds = new Sakri.Geom.Rectangle(0,0, getWidth(canvasContainer) , getHeight(canvasContainer));

 if(htmlBounds.width >= maxStageWidth){

 canvas.width = maxStageWidth;

 canvas.style.left = htmlBounds.getCenterX() - (maxStageWidth/2)+"px";

 }else{

 canvas.width = htmlBounds.width;

 canvas.style.left ="0px";

 }

 if(htmlBounds.height > maxStageHeight){

 canvas.height = maxStageHeight;

 canvas.style.top = htmlBounds.getCenterY() - (maxStageHeight/2)+"px";

 }else{

 canvas.height = htmlBounds.height;

 canvas.style.top ="0px";

 }

 bounds = new Sakri.Geom.Rectangle(0,0, canvas.width, canvas.height);

 context.clearRect(0,0,canvas.width, canvas.height);



 if(bounds.width