IE 濾鏡動畫設計
<html>
<head>
<style>
#bg{
width:90%;
height:400px;
margin:auto;
background:black;
color:white;
}
</style>
</head>
<BODY>
<center>
<!-- 絕對定位的父容器如果不是絕對定位，那麼它的坐标是相對于body的 -->
<div id='bg' style='filter:progid:DXImageTransform.Microsoft.Gradient(gradienttype=1, startcolorstr=#ffffff, endcolorstr=#ffffff) alpha(opacity=255);position:absolute;left:15%;width:70%;'>
<div id='xx' style='position:absolute;left:40%;'>
<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;">
X
</font>
</div>
<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;">
Gun
</div>
</center>
<script>
var x = document.getElementById('x');
//1-2秒浮現出來，如果按1秒25frame算,每frame為40ms，顔色需要變化25次
//從0 - 255 每次增加 255/25 色值10
function change(start){
if(start<0)start=0;
//x.style.color = 'rgb('+start+','+start+','+start+')';
//濾鏡隻支援16位顔色
var temp = start.toString(16);
temptemp = temp.length<2?0+temp:temp;
x.filters[0].color= '#'+temp+temp+temp;
if(start==0){
moveX(document.getElementById('xx').offsetLeft);
return;
}
setTimeout(function(){change(start-10)},100);
}
change(255);
//10個frame完成
function moveX(start){
var xx = document.getElementById('xx');
if(start<0)start=0;
with(xx.style){
left=start+'px';
}
if(start==0){
changeBg(255);
return;
setTimeout(function(){moveX(start-30)},40);
//漸變背景色，浮現Gun
function changeBg(start){
var temp = start.toString(16);
temptemp = temp.length<2?0+temp:temp;
//改變X
x.style.color = 'rgb('+start+','+start+','+start+')';
//改變背景
var bg = document.getElementById('bg');
bg.filters[0].endcolorstr= '#'+temp+temp+temp;
//浮現字元
var gun = document.getElementById('gun');
gun.filters[0].opacity = 255-start;
changeGun(255);
setTimeout(function(){changeBg(start-10)},10);
//Gun漸變消失
function changeGun(start){
//漸變消失字元
gun.filters[0].opacity = start;
//x.style.width='100%';
//x.style.height='100%';
setTimeout(function(){
bgShake(50)
dispearBg(255);
},500);
setTimeout(function(){changeGun(start-10)},40);
//X背景閃動,範圍 x=y，在 +-50 --- +-100之間
function bgShake(times){
if(times<0){
//var bg = document.getElementById('bg');
//bg.style.display='none';
return;
}
x.filters[1].offX= rand()[0]?rand()[1]*-1:rand()[0];
x.filters[1].offY= rand()[0]?rand()[1]*-1:rand()[0];
setTimeout(function(){bgShake(times-1)},80);
//漸變背景消失
function dispearBg(start){
bg.filters[1].opacity= start;
setTimeout(function(){dispearBg(start-10)},40);
//傳回正負和數值
function rand(){
var temp = Math.random()*100;
var positive = temp<50?true:false;
temp = positive?temp+50:temp;
return [positive,temp];
</script>
<!--
<div id='bg'>
<font color=black style="filter:shadow(color=#black);width:100px;height:200px;font-family:Arial Black;font-weigth:bold;font-size:200pt;">X</font>
<font style="filter:shadow(color=#dddddd);width:100px;height:100px;font-family:Arial Black;font-weigth:bold;font-size:200pt;">Gun</font>
</div>
-->
</body>
</html>
本文轉自huangyouliang10 51CTO部落格，原文連結:http://blog.51cto.com/1572091hyl10/428938
![阿裡雲ECS（ubutun）下安裝docker[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)