1.    IE 滤镜动画设计 
    2.  
   
  2.    
    3.  
   
  3.  <html> 
    4.  
   
  4.     <head> 
    5.  
   
  5.     <style> 
    6.  
   
  6.         #bg{ 
    7.  
   
  7.             width:90%; 
    8.  
   
  8.             height:400px; 
    9.  
   
  9.             margin:auto; 
    10.  
   
  10.             background:black; 
    11.  
   
  11.             color:white; 
    12.  
   
  12.              
    13.  
   
  13.         } 
    14.  
   
  14.     </style> 
    15.  
   
  15. </head> 
    16.  
   
  16. <BODY> 
    17.  
   
  17.     <center> 
    18.  
   
  18.         <!-- 绝对定位的父容器如果不是绝对定位，那么它的坐标是相对于body的 --> 
    19.  
   
  19.     <div id='bg' style='filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=1, startcolorstr=#ffffff, endcolorstr=#ffffff) alpha(opacity=255);position:absolute;left:15%;width:70%;'> 
    20.  
   
  20.         <div id='xx' style='position:absolute;left:40%;'> 
    21.  
   
  21.         <font id='x' color=white style="filter:shadow(strength=5,color=rgb(255,255,255)) DropShadow(color=#999999,offX=0,offY=0);width:1px;height:1px;font-family:Arial Black;font-weigth:bold;font-size:200pt;"> 
    22.  
   
  22.  
    23.  
   
  23.             X 
    24.  
   
  24.         </font> 
    25.  
   
  25.         </div> 
    26.  
   
  26.         <font id='gun' color=white style="filter:alpha(opacity=0) shadow(strength=5,color=white);width:1px;height:1px;font-family:Arial Black;font-weigth:bold;font-size:150pt;"> 
    27.  
   
  27.             Gun 
    28.  
   
  28.         </font> 
    29.  
   
  29.     </div> 
    30.  
   
  30. </center> 
    31.  
   
  31.     <script> 
    32.  
   
  32.          var x = document.getElementById('x'); 
    33.  
   
  33.          //1-2秒浮现出来，如果按1秒25frame算,每frame为40ms，颜色需要变化25次 
    34.  
   
  34.          //从0 - 255 每次增加 255/25 色值10 
    35.  
   
  35.          function change(start){ 
    36.  
   
  36.             if(start<0)start=0; 
    37.  
   
  37.                 //x.style.color = 'rgb('+start+','+start+','+start+')'; 
    38.  
   
  38.                 //滤镜只支持16位颜色 
    39.  
   
  39.                 var temp = start.toString(16); 
    40.  
   
  40.                 temptemp = temp.length<2?0+temp:temp; 
    41.  
   
  41.                 x.filters[0].color= '#'+temp+temp+temp; 
    42.  
   
  42.                 if(start==0){ 
    43.  
   
  43.                     moveX(document.getElementById('xx').offsetLeft); 
    44.  
   
  44.                     return; 
    45.  
   
  45.                 } 
    46.  
   
  46.                 setTimeout(function(){change(start-10)},100); 
    47.  
   
  47.          } 
    48.  
   
  48.           
    49.  
   
  49.          change(255); 
    50.  
   
  50.           
    51.  
   
  51.          //10个frame完成 
    52.  
   
  52.          function moveX(start){ 
    53.  
   
  53.                     var xx = document.getElementById('xx'); 
    54.  
   
  54.                     if(start<0)start=0; 
    55.  
   
  55.                     with(xx.style){ 
    56.  
   
  56.                         left=start+'px'; 
    57.  
   
  57.                     } 
    58.  
   
  58.                     if(start==0){ 
    59.  
   
  59.                         changeBg(255); 
    60.  
   
  60.                         return; 
    61.  
   
  61.                     } 
    62.  
   
  62.                     setTimeout(function(){moveX(start-30)},40); 
    63.  
   
  63.                      
    64.  
   
  64.          } 
    65.  
   
  65.           
    66.  
   
  66.          //渐变背景色，浮现Gun 
    67.  
   
  67.          function changeBg(start){ 
    68.  
   
  68.                     if(start<0)start=0; 
    69.  
   
  69.                     var temp = start.toString(16); 
    70.  
   
  70.                     temptemp = temp.length<2?0+temp:temp; 
    71.  
   
  71.                     //改变X 
    72.  
   
  72.                     x.style.color = 'rgb('+start+','+start+','+start+')'; 
    73.  
   
  73.                     //改变背景 
    74.  
   
  74.                     var bg = document.getElementById('bg'); 
    75.  
   
  75.                     bg.filters[0].endcolorstr= '#'+temp+temp+temp; 
    76.  
   
  76.                     //浮现字符 
    77.  
   
  77.                     var gun = document.getElementById('gun'); 
    78.  
   
  78.                     gun.filters[0].opacity = 255-start; 
    79.  
   
  79.                     if(start==0){ 
    80.  
   
  80.                     changeGun(255); 
    81.  
   
  81.                         return; 
    82.  
   
  82.                     } 
    83.  
   
  83.                     setTimeout(function(){changeBg(start-10)},10); 
    84.  
   
  84.          } 
    85.  
   
  85.           
    86.  
   
  86.          //Gun渐变消失 
    87.  
   
  87.          function changeGun(start){ 
    88.  
   
  88.                     if(start<0)start=0; 
    89.  
   
  89.                     //渐变消失字符 
    90.  
   
  90.                     var gun = document.getElementById('gun'); 
    91.  
   
  91.                     gun.filters[0].opacity = start; 
    92.  
   
  92.                     if(start==0){ 
    93.  
   
  93.                         //x.style.width='100%'; 
    94.  
   
  94.                         //x.style.height='100%'; 
    95.  
   
  95.                         setTimeout(function(){ 
    96.  
   
  96.                             bgShake(50) 
    97.  
   
  97.                         dispearBg(255); 
    98.  
   
  98.                         },500); 
    99.  
   
  99.                         return; 
    100.  
   
  100.                     } 
    101.  
   
  101.                     setTimeout(function(){changeGun(start-10)},40); 
    102.  
   
  102.          } 
    103.  
   
  103.           
    104.  
   
  104.          //X背景闪动,范围 x=y，在 +-50 --- +-100之间 
    105.  
   
  105.          function bgShake(times){ 
    106.  
   
  106.             if(times<0){ 
    107.  
   
  107.                 //var bg = document.getElementById('bg'); 
    108.  
   
  108.                 //bg.style.display='none'; 
    109.  
   
  109.                 return; 
    110.  
   
  110.             } 
    111.  
   
  111.                     x.filters[1].offX= rand()[0]?rand()[1]*-1:rand()[0]; 
    112.  
   
  112.                     x.filters[1].offY= rand()[0]?rand()[1]*-1:rand()[0]; 
    113.  
   
  113.                     setTimeout(function(){bgShake(times-1)},80); 
    114.  
   
  114.          } 
    115.  
   
  115.           
    116.  
   
  116.          //渐变背景消失 
    117.  
   
  117.          function dispearBg(start){ 
    118.  
   
  118.                     if(start<0)start=0; 
    119.  
   
  119.                     //改变背景 
    120.  
   
  120.                     var bg = document.getElementById('bg'); 
    121.  
   
  121.                     bg.filters[1].opacity= start; 
    122.  
   
  122.                     if(start==0){ 
    123.  
   
  123.                          
    124.  
   
  124.                         return; 
    125.  
   
  125.                     } 
    126.  
   
  126.                     setTimeout(function(){dispearBg(start-10)},40); 
    127.  
   
  127.          } 
    128.  
   
  128.           
    129.  
   
  129.           
    130.  
   
  130.          //返回正负和数值 
    131.  
   
  131.          function rand(){ 
    132.  
   
  132.                 var temp = Math.random()*100; 
    133.  
   
  133.                 var positive = temp<50?true:false; 
    134.  
   
  134.                 temp = positive?temp+50:temp; 
    135.  
   
  135.                 return [positive,temp]; 
    136.  
   
  136.          } 
    137.  
   
  137.     </script> 
    138.  
   
  138. <!-- 
    139.  
   
  139. <div id='bg'> 
    140.  
   
  140.     <font color=black style="filter:shadow(color=#black);width:100px;height:200px;font-family:Arial Black;font-weigth:bold;font-size:200pt;">X</font> 
    141.  
   
  141.     <font style="filter:shadow(color=#dddddd);width:100px;height:100px;font-family:Arial Black;font-weigth:bold;font-size:200pt;">Gun</font> 
    142.  
   
  142. </div> 
    143.  
   
  143. --> 
    144.  
   
  144.  
    145.  
   
  145. </body> 
    146.  
   
  146. </html> 
    147.