燃烧吧，激情四射的CSS3文字特效

在这个激情的岁月里，让我们点亮技术的星火，燃起爱的火把。今天这篇文章我要向大家分享一个CSS3文字燃烧特效，这个特效主要用到了CSS3的text-shadow属性，并结合jquery动态渲染投影，从而实现了文字燃烧的效果。先截一个效果图，源码和在线示例在文章最后。

这个CSS3文字燃烧特效的实现js代码如下：

(function ($)
{
    // Zachary Johnson
    // http://www.zachstronaut.com
    // December 2009
    
    $.fn.ignite = function (burn)
    {
        $(this).each(
            function ()
            {
                var letters = $(this).text().split('');
                $(this).html('<span>' + letters.join('</span><span>') + '</span>');
                $spans = $(this).find('span');
                setInterval(function () {$spans.each(burn);}, 100);
            }
        );
    }
})(jQuery);


function gasFlame()
{
    // Zachary Johnson
    // http://www.zachstronaut.com
    // December 2009
    
    var colors = ['#fff', '#99f', '#00f', '#009'];
    if (Math.random() > 0.90)
    {
        colors.push('#f90');
    }
    
    var hv = 0.04;
    
    var textShadows = [];

    var c = 0;
    var h = 0;
    var s = 0;

    while (c < colors.length)
    {
        s = 2 + Math.round(Math.random() * 2);

        while (s--)
        {
            shadow = '0 ' + h + 'em ' + -h + 'em ' + colors[c];

            textShadows.push(shadow);

            h -= hv;
        }

        c++;
    }

    $(this).css({color: colors[0], textShadow: textShadows.join(', ')});
}


$(begin);

function begin()
{
    $('h2').ignite(gasFlame);
}

上面的代码是让h2中的文字拥有燃烧效果，你可以在页面定义h2标签，这里就不列出来了，注意要引入jquery主库文件。

最后奉上CSS3文字燃烧特效的示例和源码

CSS3文字燃烧特效在线示例

CSS3文字燃烧特效源码下载

该特效来自CSS3 Shining Text, CSS2 Flaming Text

转载请自觉注明原文：http://www.itivy.com/html5/archive/2012/1/10/css3-jquery-burn-text.html