|
|
CSS特效赏析
CSS特效赏析
1.动态改变样式
2.动态可视化效果
3.动态滤镜显示
4.Blentrans属性
5.Revealtrans属性
6.动态Glow属性
7.显示和隐藏
8.兼容两种浏览器
9.移动对象
10.对象的滑动
11.键盘控制对象
12.鼠标控制对象
13.Clip属性的应用
14.动态文字变换
15.动态改变页面样式
16.动态时钟控制
17.倒计时
18.动态刷新
|
|
CSS特效赏析
上一实例 下一实例
16、动态时钟控制
这个例子会让您看上去觉得眼花缭乱，在输入栏中输入不同的时间间隔会以不同的速度显示。
这里面主要用的是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>
好了，本节就介绍到这里，下一节将向您推荐一个倒计时的例子。
上一实例 下一实例
|
|
|