|
CSS滤镜制作Dhtml实例(3)
下面我们来看一下用两个滤镜共同作用产生的效果,看下面的时钟:
源代码如下,下面的代码是放在<head></head>之间的::
<STYLE type=text/css>
.time { COLOR: #FFC629; FONT-FAMILY: Comic Sans Ms; FONT-SIZE: 14pt;
FONT-WEIGHT: bold}
</STYLE>
<SCRIPT language=JavaScript>
<!-- Hiding
var ctimer;
function init(){
if (document.all){
tim2.style.left=tim1.style.posLeft;
tim2.style.top=tim1.style.posTop+tim1.offsetHeight-6;
settimes();
}
}//定义id=tim2的时钟相对于id=tim1的位置
function settimes(){
var time= new Date();
hours= time.getHours();
mins= time.getMinutes();
secs= time.getSeconds();
if (hours<10)
hours="0"+hours;
if(mins<10)
mins="0"+mins;
if (secs<10)
secs="0"+secs;
tim1.innerHTML=hours+":"+mins+":"+secs
tim2.innerHTML=hours+":"+mins+":"+secs
ctimer=setTimeout('settimes()',960);
}
// Done hiding -->
</SCRIPT>
修改<body>语句为<BODY
onload=init()>
以下代码是放在<body>之后:
<div class=time id=tim1 style="HEIGHT:
10px; LEFT: 163px; POSITION: absolute; TOP: 186px; WIDTH: 10px"></div>
<div class=time id=tim2 style="FILTER:
flipv() alpha(opacity=20); FONT-STYLE: italic; POSITION: absolute;
width: 511px; height: 27px"></div>
源代码中,最主要的是看加到<body>之后的那段,其他的时定义时间的.看上面的红色部分,使用了Flipv滤镜和Alpha滤镜.
id=tim2的那段<div>标签定义了一个和id=tim1一样的时钟,然后使用Flipv滤镜将它垂直翻转,在使用Alpha滤镜,将它的透明度增加,看起来就模糊了,再定义它的字体风格为斜体
(FONT-STYLE: italic),看上去就象是阴影一样.
上一页 返回目录 下一页
|
