演示见本页左下角

<script type="text/rocketscript">

document.onreadystatechange = subSomething;

function delay1()

{

document.getElementById('circle1').style.cssText="display:none;";
setTimeout('delay2()', 50);

}

function delay2()

{

document.getElementById('circle').style.cssText="display:none;";

setTimeout('delay3()', 40);

}

function delay3()

{

document.getElementById('circletext').style.cssText="display:none;";

}

function subSomething() 

{ 

if(document.readyState == "complete")

{

    setTimeout('delay1()', 40);

 }
 } 
 </script>
 <style>#circle{opacity:0;filter:alpha(opacity='0') background-color:#ffffff;border:5px solid #FF0000;opacity:.9;border-right:5px solid rgba(0,0,0,0);border-left:5px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 35px #FF0000;width:60px;height:60px;margin:0 auto;position:fixed;left:30px;bottom:30px;-moz-animation:spinPulse 1s infinite linear;-webkit-animation:spinPulse 1s infinite linear;-o-animation:spinPulse 1s infinite linear;-ms-animation:spinPulse 1s infinite linear;}#circle1{opacity:0;filter:alpha(opacity='0') background-color:#ffffff;border:6px solid #FF0000;opacity:.9;border-left:6px solid rgba(0,0,0,0);border-right:6px solid rgba(0,0,0,0);border-radius:50px;box-shadow:0 0 15px #FF0000;width:40px;height:40px;margin:0 auto;position:fixed;left:39px;bottom:39px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;-o-animation:spinoffPulse 1s infinite linear;-ms-animation:spinoffPulse 1s infinite linear;}#circletext{opacity:0;filter:alpha(opacity='0') width:46px;height:20px;margin:0 auto;position:fixed;left:46px;bottom:53px;color:#F00}@-moz-keyframes spinPulse{0%{-moz-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-moz-transform:rotate(145deg);opacity:1;}100%{-moz-transform:rotate(-320deg);opacity:0;}}@-moz-keyframes spinoffPulse{0%{-moz-transform:rotate(0deg);}100%{-moz-transform:rotate(360deg);}}@-webkit-keyframes spinPulse{0%{-webkit-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-webkit-transform:rotate(145deg);opacity:1;}100%{-webkit-transform:rotate(-320deg);opacity:0;}}@-webkit-keyframes spinoffPulse{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}@-o-keyframes spinPulse{0%{-o-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-o-transform:rotate(145deg);opacity:1;}100%{-o-transform:rotate(-320deg);opacity:0;}}@-o-keyframes spinoffPulse{0%{-o-transform:rotate(0deg);}100%{-o-transform:rotate(360deg);}}@-ms-keyframes spinPulse{0%{-ms-transform:rotate(160deg);opacity:0;box-shadow:0 0 1px #505050;}50%{-ms-transform:rotate(145deg);opacity:1;}100%{-ms-transform:rotate(-320deg);opacity:0;}}@-ms-keyframes spinoffPulse{0%{-ms-transform:rotate(0deg);}100%{-ms-transform:rotate(360deg);}}</style>

<div id="circle" style="opacity: 1;"></div>

<div id="circletext" style="opacity: 1;">X</div>

<div id="circle1" style="opacity: 1;"></div>