CSS3⽕焰⽂字特效制作教程
⽤⼀句很俗⽓的话概括这两天的情况就是：“最近很忙”，虽然⼿头上有不少很酷的HTML5和CSS3资源，但确实没时间将它们的实现过程写成教程分享给⼤家。今天刚完成了⼀个神秘的项⽬，空下来来博客园写点东西。今天给⼤家分享2个CSS3⽕焰⽂字特效，并且将实现的思路和核⼼代码写成教程分享给⼤家。
第⼀个是静态的⽕焰⽂字效果，先看看效果图：
看着图的效果很酷吧。
同时你也可以在这⾥查看。
下⾯是实现的源码，由于是静态的⽂字效果，所以代码相当⽐较简单。
HTML代码，就⼀个h1标签：
<h1 id="fire">HTML5 Tricks</h1>
然后是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层的层叠阴影，⽤阶梯变化的颜⾊和⼀定的阴影半径模拟出⽕焰从⾥到外的颜⾊渐变。
第⼆个是带动画的⽕焰⽂字特效，说实话，和上⼀个相⽐，这个不怎么像⽕焰，但我还是称它⽕焰吧。
先来看看效果图：
看看，是不是很⼤⽓。
要看动起来的效果，可以。
然后再分析⼀下源代码，由于涉及到CSS3动画，所以利⽤了JS代码动态改变CSS样式。
先是HTML代码，构造了⼀个div容器：
<div id="canvasContainer"></div>
下⾯是JS代码：
function Stats()
{
this.init();
}
Stats.prototype =
{
js控制css3动画触发init: function()
{
this.frames = 0;
this.framesMin = 100;
this.framesMax = 0;
this.time = new Date().getTime();
this.timePrev = new Date().getTime();
this.framesText = ateElement("div");
this.lor = '#00ffff';
this.framesText.style.marginLeft = '3px';
this.framesText.style.marginBottom = '3px';
this.framesText.innerHTML = '<strong>FPS</strong>';
this.canvas = ateElement("canvas");
this.canvas.width = 74;
this.canvas.height = 30;
this.canvas.style.display = 'block';
this.canvas.style.marginLeft = '3px';
this.canvas.style.marginBottom = '3px';
setInterval( bargs( function( _this ) { _this.update(); return false; }, this ), 1000 );
},
getDisplayElement: function()
{
ainer;
},
tick: function()
{
this.frames++;
},
update: function()
{
this.time = new Date().getTime();
this.fps = und((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 = '<strong>' + this.fps + ' FPS</strong> (' + this.framesMin + '-' + this.framesMax + ')'; tImageData = ImageData(1, 0, this.canvas.width - 1, 30);
this.index = ( Math.floor(30 - Math.min(30, (this.fps / 60) * 30)) );
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
alize = 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( alize(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-f\d])([a-f\d])([a-f\d])$/i;
hex = place(shorthandRegex, function(m, r, g, b) {
return r + r + g + g + b + b;
});
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return result ? {
r: parseInt(result[1], 16),
g: parseInt(result[2], 16),
b: parseInt(result[3], 16)
} : null;
}
RandomNumberInRange = function(min, max){
return min + Math.random() * (max - min);
};
RandomIntegerInRange = function(min, max){
und(RandomNumberInRange(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.Right = function(){
return this.x + this.width;
};
Sakri.Geom.Bottom = function(){
return this.y + this.height;
};
Sakri.Geom.Center = function(){
return new Sakri.Geom.CenterX(), CenterY());
};
Sakri.Geom.CenterX = function(){
return this.x + this.width/2;
};
Sakri.Geom.CenterY=function(){
return this.y + this.height/2;
};
Sakri.Geom.ainsPoint = function(x, y){
return x >= this.x && y >= this.y && x <= Right() && y <= Bottom();
};
Sakri.Geom.Rectangle.prototype.clone = function(){
return new Sakri.Geom.Rectangle(this.x, this.y, this.width, this.height);
};
Sakri.Geom.String = function(){
return "Rectangle{x:"+this.x+" , y:"+this.y+" , width:"+this.width+" , height:"+this.height+"}";  };
}(window));
/**
* Created by sakri on 27-1-14.
* has a dependecy on Sakri.Geom
* has a dependecy on Sakri.BitmapUtil
*/
(function (window){
var Sakri = window.Sakri || {};
window.Sakri = window.Sakri || Sakri;
Sakri.CanvasTextUtil = {};
//returns the biggest font size that best fits into given width
FontSizeForWidth = function(string, fontProps, width, canvas, fillStyle, maxFontSize){
if(!canvas){
var canvas = ateElement("canvas");
}
if(!fillStyle){
fillStyle = "#000000";
}
if(isNaN(maxFontSize)){
maxFontSize = 500;
}
var context = Context('2d');
context.font = FontString();
var copy = fontProps.clone();
//console.log("getFontSizeForWidth() 1  : ", copy.fontSize);
context.font = FontString();
var textWidth = asureText(string).width;
//SOME DISAGREEMENT WHETHER THIS SHOOULD BE WITH && or ||
if(textWidth < width){
asureText(string).width < width){
copy.fontSize++;
context.font = FontString();
if(copy.fontSize > maxFontSize){
console.log("getFontSizeForWidth() max fontsize reached");
return null;
}
}
}else if(textWidth > width){
asureText(string).width > width){
copy.fontSize--;
context.font = FontString();
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.FontString = function(){
return this.fontWeight + " " + this.fontStyle + " " + this.fontSize + "px " + this.fontFace;
};
}(window));
window.__requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
(function () {
return function (callback, element) {
var lastTime = element.__lastTime;
if (lastTime === undefined) {
lastTime = 0;
}
var currTime = w();
var timeToCall = Math.max(1, 33 - (currTime - lastTime));
window.setTimeout(callback, timeToCall);
element.__lastTime = currTime + timeToCall;
};
})();
var readyStateCheckInterval = setInterval( function() {
if (adyState === "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 = ElementById("canvasContainer");
stats = new Stats();
canvasContainer.appendChild( DisplayElement() );
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 );

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。