CSS3文字燃烧特效示例

HUYIZIZHEN

浏览: 115811 次
性别:
来自: 深圳

最近访客更多访客>>

zmingxing

XueHangTian

xmind

cchheenn_dy

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web美化

css jquery html JavaScript


<!DOCTYPE html>
<html>
<head>
    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>CSS3文字燃烧特效示例</title>


<style type="text/css">
body
{
	background-color:#333;
}
h1
{
    margin-top: 24px;
    font-size: 2em;
	color:#fff;
}

h2
{
    margin-top: 36px;
    font-size: 3em;
}

p
{
    margin-top: 24px;
}

tt
{
    font-family: Monaco, monospace;
}
</style>

<script src="jquery.js" type="text/javascript"></script>

<script type="text/javascript">
(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);
}


</script>
    

</head>
<body>

<h1>CSS文字燃烧特效:</h1>

<h2>Now we're cooking with gas.</h2>

</body>
</html>