CSS3文字焚烧特效示例-HTML教程-爱易网页

CSS3文字焚烧特效示例

日期：2014-05-17　浏览次数：20668 次

CSS3文字燃烧特效示例


<!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>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

CSS3文字焚烧特效示例

相关资料更多>

推荐阅读更多>