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=)