这个例子会让您看上去觉得眼花缭乱，在输入栏中输入不同的时间间隔会以不同的速度显示。
这里面主要用的是revealtrans滤镜属性，在每一个区域内都添加了revealtrans属性，再让它们调用onfilterchange函数。而输入时间间隔是靠javascript的onchange
事件实现的，下面我们把有关CSS的代码列出如下：
<body onload="init()">
<span style="position:absolute;top:140;left:20;width:400;
text-align:center; font-size:12pt">
<p>输入新的时间间隔。
<input id="speed" onchange="updateTime()" size="20"> </span> </p>
//*定义输入文本框，调用updateTime（）函数*//
<div id="div1"
style="position:absolute;top:20;left:20;width:100;height:100;
font-size:100;text-align:center;background-color:blue;
filter:revealtrans(transition=1,duration=1.5)"
onfilterchange="done(1)">
//*设置一个层，包括它的定位、字体和revealtrans滤镜属性，同时调用Done函数
改变滤镜显示样式，达到动态的目的，下面的三个层的设置内容与这个类似*//
<p>A</p> </div>
<div id="div2"
style="position:absolute;top:20;left:140;width:100;height:100;
font-size: 100;text-align:center;background-color:blue;
filter:revealtrans(transition=2,duration=1.5)"
onfilterchange="done(2)">
<p>A</p> </div>
<div id="div3"
style="position:absolute;top:20;left:260;width:100;height:100;
font- size:100;text-align:center;background-color:blue;
filter:revealtrans(transition=3,duration=1.5)"
onfilterchange="done(3)">
<p>A</p> </div>
<div id="div4"
style="position:absolute;top:20;left:380;width:100;height:100;
font- size:100;text-align:center;background-color:blue;
filter:revealtrans(transition=4,duration=1.5)"
onfilterchange="done(4)">
<p>A</p> </div>
</body>
