纯css模拟液晶式展示数字时间-HTML教程-爱易网页

纯css模拟液晶式展示数字时间

日期：2014-05-17　浏览次数：20610 次

纯css模拟液晶式显示数字时间
首先是借鉴了yiminghe大虾的创意和思路(http://www.iteye.com/topic/705529)，可惜看到帖子的时候里面的demo已经打不开了，所以决定自己也做一个。

我觉得他画的数字不好看，所以我还是按照经典样式做的。另外变换数字的原理和思路也他的也不一样，我是全都交给css来完成了，我个人认为渲染效率更高些，实现起来也更简单些。

其实很容易就能封装成时钟、倒计时、秒表一类的应用。
特点如下：
1，纯css实现，无图片
2，以em为长度单位，支持缩放
3，以不同类名来控制显示数字，方便控制
转自：http://www.ok22.org/art_detail.aspx?id=180(可直接运行)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<title></title>
<style type="text/css">
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
#mydemo{margin:100px auto;width:277px;letter-spacing:-1em;}
#mydemo span{margin:0 5px;font-size:0;width:2em;height:14em;display:inline-block;position:relative;overflow:hidden;}

.clock{font-size:16px;width:9em;height:14em;position:relative;display:inline-block;margin:0 2px;-webkit-text-size-adjust:none;}
.clock{*display:inline;}
.clock div{position: absolute;border-style:solid;}
.clock .l,.clock .r,.clock .u,.clock .d{width:0;height:0;overflow:hidden;}

.clock .v{width:0;height:5em;border-width:0 0.5em;border-color:#565656;}
.clock .v .u{border-style:dotted dotted solid dotted;border-width:0 0.5em 0.5em;border-color:transparent transparent #565656 transparent;top:-0.5em;left:-0.5em;}
.clock .v .d{border-style:solid dotted dotted dotted;border-width:0.5em 0.5em 0 0.5em;border-color:#565656 transparent transparent transparent;left:-0.5em;bottom:-0.5em}

.clock .h{width:5.5em;height:0;border-width:0.5em 0;border-color:#565656;}
.clock .h .l{border-style:dotted solid dotted dotted;border-width:0.5em 0.5em 0.5em 0;border-color:transparent #565656 transparent transparent;top:-0.5em;left:-0.5em;}
.clock .h .r{border-style:dotted dotted dotted solid;border-width:0.5em 0 0.5em 0.5em;border-color:transparent transparent transparent #565656;top:-0.5em;right:-0.5em;}

.clock .n1{left:0.5em;top:1.5em;}
.clock .n2{left:0.5em;top:7.5em;}
.clock .n4{left:7.5em;top:7.5em;}
.clock .n5{left:7.5em;top:1.5em;}

.clock .n6{top:0.4em;left:1.8em;}
.clock .n3{top:12.5em;left:1.8em;}
.clock .n7{top:6.5em;left:1.8em;}

.dot {width:2em;height:14em;}
.dot1,.dot2 {width:0;height:0;border:0.5em solid #565656;position:absolute;left:0.5em;font-size:1em}
.dot1{top:4em;}
.dot2{top:9em;}
.putout .dot1,.putout .dot2 {display:none;}

/*原始样式
.c1 .n1,.c1 .n2,.c1 .n3,.c1 .n6,.c1 .n7,
.c2 .n1,.c2 .n4,
.c3 .n1,.c3 .n2,
.c4 .n2,.c4 .n3,.c4 .n6,
.c5 .n2,.c5 .n5,
.c6 .n5,
.c7 .n1,.c7 .n2,.c7 .n3,.c7 .n7,
.c9 .n2,
.c0 .n7{display:none}
*/

.c1 .n1,.c1 .n2,.c1 .n3,.c1 .n6,.c1 .n7,
.c2 .n1,.c2 .n4,
.c3 .n1,.c3 .n2,
.c4 .n2,.c4 .n3,.c4 .n6,
.c5 .n2,.c5 .n5,
.c6 .n5,
.c7 .n1,.c7 .n2,.c7 .n3,.c7 .n7,
.c9 .n2,
.c0 .n7{border-color:#eee;}

.c1 .n3 .l,.c1 .n3 .r,.c1 .n6 .l,.c1 .n6 .r,.c1 .n7 .l,.c1 .n7 .r,
.c4 .n3 .l,.c4 .n3 .r,.c4 .n6 .l,.c4 .n6 .r,
.c7 .n3 .l,.c7 .n3 .r,.c7 .n7 .l,.c7 .n7 .r,
.c0 .n7 .l,.c0 .n7 .r{border-left-color:#eee;border-right-color:#eee;}

.c1 .n1 .u,.c1 .n1 .d,.c1 .n2 .u,.c1 .n2 .d,
.c2 .n1 .u,.c2 .n1 .d,.c2 .n4 .u,.c2 .n4 .d,
.c3 .n1 .u,.c3 .n1 .d,.c3 .n2 .u,.c3 .n2 .d,
.c4 .n2 .u,.c4 .n2 .d,
.c5 .n2 .u,.c5 .n2 .d,.c5 .n5 .u,.c5 .n5 .d,
.c6 .n5 .u,.c6 .n5 .d,
.c7 .n1 .u,.c7 .n1 .d,.c7 .n2 .u,.c7 .n2 .d,
.c9 .n2 .u,.c9 .n2 .d{border-top-color:#eee;border-bottom-color:#eee;}

</style>
<script type="text/javascript" language="javascript" >

	var Clock={
		size:1,
		handle:null,
		hour:0,
		min:0,
		sec:0,
		resize:function(){
			var clocks=document.getElementById("mydemo").children,i=0,k=clocks.length;
			var fontsize=(this.size % 20)+"px",halfsize=(this.size++ % 20)+"px";

			for(;i<k-2;){
				clocks[i++].style.fontSize=fontsize

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

纯css模拟液晶式展示数字时间

相关资料更多>

推荐阅读更多>