CSS实现倒影的时钟效果_CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程

在网上看到网页上的一个JS时钟效果，与其它JS时钟不同的是，下面的时钟下过带有一个漂亮的倒影特效，更加具有立体感了，增加了一点个性元素。这些特效是CSS滤镜的功劳。用好CSS滤镜会让你的网页增色不少。看代码，点击直接运行：

<html> <head> <title>带倒影的Js日期时钟-DIV+CSS教程- http://www.csschina.net</title> <style> .time { font-size: 12pt; line-height: 14pt; color:red;} </style> <SCRIPT language=JavaScript> var ctimer; function init(){ if (document.all){ tim2.style.left=tim1.style.posLeft; tim2.style.top=tim1.style.posTop+tim1.offsetHeight-6; settimes(); } } 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); } </SCRIPT> </head> <body bgcolor="#fef4d9" onload="init()"> <DIV class=time id=tim1 style="HEIGHT: 20px; LEFT: 50px; POSITION: absolute; TOP: 10px; WIDTH: 10px"></DIV> <DIV class=time id=tim2 style="FILTER: flipv() alpha(opacity=20); FONT-STYLE: italic; POSITION: absolute"></DIV> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

本文由CSS中国整理

CSS教程,DIV CSS视频教程,DIV CSS模板,DIV CSS布局入门教程 - CSS中国

搜索

热门标签

CSS实现倒影的时钟效果