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; textShadows.push(shadow); h -= hv; } c++; } $(this).css({color: colors, 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>
页:
[1]