css3时钟效果

wocacaca
wocacaca 发布于 2015-03-12 17:05:08 浏览:879 类型:原创 - 随笔 分类:HTML/CSS - 待整理 二维码: 作者原创 版权保护
看到用canvas写的时钟,感觉效果很棒,对canvas不熟,用css3写了一个..大家多多指教
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>clock</title>
<style>
*{ margin:0; padding:0;}
.clock{width:400px; height:400px; background:#F66; border-radius:50%; margin:100px auto;}
.time-box{width:360px; height:360px; background:#fff; border-radius:50%; position:relative; top:20px; left:20px;}
.time-box span{ font-size:36px; position:absolute;}
.hour-1{ top:45px; right:80px; transform:translate(-50%,-50%);}
.hour-2{ top:110px; right:25px; transform:translate(-50%,-50%);}
.hour-3{ right:5px; top:180px;transform:translate(0,-50%);}
.hour-4{ right:25px; bottom:60px;transform:translate(-50%,-50%);}
.hour-5{ right:80px; bottom:0px;transform:translate(-50%,-50%);}
.hour-6{ bottom:5px; left:180px;transform:translate(-50%,0);}
.hour-7{ left:100px; bottom:0px;transform:translate(-50%,-50%);}
.hour-8{ left:40px; bottom:60px;transform:translate(-50%,-50%);}
.hour-9{left:5px; top:180px;transform:translate(0,-50%);}
.hour-10{ top:110px; left:50px; transform:translate(-50%,-50%);}
.hour-11{top:45px; left:100px; transform:translate(-50%,-50%);}
.hour-12{ left:180px; top:5px; transform:translate(-50%,0);}

.center{width:10px; height:10px; background:#000; border-radius:50%; position:absolute; left:50%; top:50%;transform:translate(-50%,-50%);}
.second-pointer{width:2px; height:150px; background:#F00; position:absolute; bottom:160px; left:179px;transform-origin:50% 130px;transform: rotate(30deg); z-index:999; }
.min-pointer{width:4px; height:100px; background:#000; position:absolute;left:178px; bottom:180px;transform:translate(-50%,-5px);transform-origin:50% 100%;transform: rotate(0deg); z-index:998; }
.hour-pointer{width:8px; height:60px; background:#000; position:absolute; bottom:180px; left:176px;transform:translate(-50%,-5px);transform-origin:50% 100%;transform: rotate(60deg); z-index:997;}
</style>
</head>

<body>
<div class="clock">
	<div class="time-box">
    	<span class="hour-1">1</span>
        <span class="hour-2">2</span>
        <span class="hour-3">3</span>
        <span class="hour-4">4</span>
        <span class="hour-5">5</span>
        <span class="hour-6">6</span>
        <span class="hour-7">7</span>
        <span class="hour-8">8</span>
        <span class="hour-9">9</span>
        <span class="hour-10">10</span>
        <span class="hour-11">11</span>
        <span class="hour-12">12</span>
        <div class="center"></div>
        <div class="second-pointer" id="se-point" style="transform: rotate(330deg);"></div>
        <div class="min-pointer" id="m-point"></div>
        <div class="hour-pointer" id="h-point"></div>
    </div>
</div>
<script>
	window.onload = function(){
		getse();
	}
	function getse(){                           //执行主函数秒针移动
		var se = setInterval(function(){	
			pointmove("se-point");
		},1000);
	}
	var today=new Date(),
		    h=today.getHours(),
		    m=today.getMinutes(),
		    s=today.getSeconds();
			var se_point = document.getElementById('se-point');
			se_point.style.transform = "rotate("+s*6+"deg)";
			var m_point = document.getElementById('m-point');
			m_point.style.transform = "rotate("+m*6+"deg)";
			var h_point = document.getElementById('h-point');
			h=h%12;
			var hour = parseInt((m*6)/72);
			//alert(hour);
			h_point.style.transform = "rotate("+(h*30+hour*6)+"deg)"; //获取当前时间,换算成对应指针的角度
			//alert(h)
	function pointmove(name){                                  //秒针走动,判断分针和十针的状态
		var se_point = document.getElementById(name);
		var se_rot = se_point.style.transform,
			se_now = null,
			//alert(yl);
			se_array = new Array;
			se_array = se_rot.split('(');
			se_now = parseInt(se_array[1]);
			se_now+=6;
			if(se_now==360){          //如果秒针转一圈,分针跳动一格
				se_now = 0;
				m+=1;	
				var minite = m*6;
				m_point.style.transform = "rotate("+minite+"deg)";
				if(minite==360){
					minite=0;
					h+=1;
					h_point.style.transform = "rotate("+h*30+"deg)";	
				}else if(minite%72==0){                       //如果分针转动72度,时针跳动一格
					var h_rot = h_point.style.transform;
					h_array = new Array;
					h_array = h_rot.split('(');
					h_now = parseInt(h_array[1]);
					//alert(h_now)
					h_now+=6;
					h_point.style.transform = "rotate("+h_now+"deg)";	
				}
			}
		se_point.style.transform = "rotate("+se_now+"deg)";
		//console.log(se_now);
	}
	
</script>
</body>
</html>



<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>clock</title>
<style>
*{ margin:0; padding:0;}
.clock{width:400px; height:400px; background:#F66; border-radius:50%; margin:100px auto;}
.time-box{width:360px; height:360px; background:#fff; border-radius:50%; position:relative; top:20px; left:20px;}
.time-box span{ font-size:36px; position:absolute;}
.hour-1{ top:45px; right:80px; transform:translate(-50%,-50%);}
.hour-2{ top:110px; right:25px; transform:translate(-50%,-50%);}
.hour-3{ right:5px; top:180px;transform:translate(0,-50%);}
.hour-4{ right:25px; bottom:60px;transform:translate(-50%,-50%);}
.hour-5{ right:80px; bottom:0px;transform:translate(-50%,-50%);}
.hour-6{ bottom:5px; left:180px;transform:translate(-50%,0);}
.hour-7{ left:100px; bottom:0px;transform:translate(-50%,-50%);}
.hour-8{ left:40px; bottom:60px;transform:translate(-50%,-50%);}
.hour-9{left:5px; top:180px;transform:translate(0,-50%);}
.hour-10{ top:110px; left:50px; transform:translate(-50%,-50%);}
.hour-11{top:45px; left:100px; transform:translate(-50%,-50%);}
.hour-12{ left:180px; top:5px; transform:translate(-50%,0);}

.center{width:10px; height:10px; background:#000; border-radius:50%; position:absolute; left:50%; top:50%;transform:translate(-50%,-50%);}
.second-pointer{width:2px; height:150px; background:#F00; position:absolute; bottom:160px; left:179px;transform-origin:50% 130px;transform: rotate(30deg); z-index:999; }
.min-pointer{width:4px; height:100px; background:#000; position:absolute;left:178px; bottom:180px;transform:translate(-50%,-5px);transform-origin:50% 100%;transform: rotate(0deg); z-index:998; }
.hour-pointer{width:8px; height:60px; background:#000; position:absolute; bottom:180px; left:176px;transform:translate(-50%,-5px);transform-origin:50% 100%;transform: rotate(60deg); z-index:997;}
</style>
</head>

<body>
<div class="clock">
	<div class="time-box">
    	<span class="hour-1">1</span>
        <span class="hour-2">2</span>
        <span class="hour-3">3</span>
        <span class="hour-4">4</span>
        <span class="hour-5">5</span>
        <span class="hour-6">6</span>
        <span class="hour-7">7</span>
        <span class="hour-8">8</span>
        <span class="hour-9">9</span>
        <span class="hour-10">10</span>
        <span class="hour-11">11</span>
        <span class="hour-12">12</span>
        <div class="center"></div>
        <div class="second-pointer" id="se-point" style="transform: rotate(330deg);"></div>
        <div class="min-pointer" id="m-point"></div>
        <div class="hour-pointer" id="h-point"></div>
    </div>
</div>
<script>
	window.onload = function(){
		getse();
	}
	function getse(){                           //执行主函数秒针移动
		var se = setInterval(function(){	
			pointmove("se-point");
		},1000);
	}
	var today=new Date(),
		    h=today.getHours(),
		    m=today.getMinutes(),
		    s=today.getSeconds();
			var se_point = document.getElementById('se-point');
			se_point.style.transform = "rotate("+s*6+"deg)";
			var m_point = document.getElementById('m-point');
			m_point.style.transform = "rotate("+m*6+"deg)";
			var h_point = document.getElementById('h-point');
			h=h%12;
			var hour = parseInt((m*6)/72);
			//alert(hour);
			h_point.style.transform = "rotate("+(h*30+hour*6)+"deg)"; //获取当前时间,换算成对应指针的角度
			//alert(h)
	function pointmove(name){                                  //秒针走动,判断分针和十针的状态
		var se_point = document.getElementById(name);
		var se_rot = se_point.style.transform,
			se_now = null,
			//alert(yl);
			se_array = new Array;
			se_array = se_rot.split('(');
			se_now = parseInt(se_array[1]);
			se_now+=6;
			if(se_now==360){          //如果秒针转一圈,分针跳动一格
				se_now = 0;
				m+=1;	
				var minite = m*6;
				m_point.style.transform = "rotate("+minite+"deg)";
				if(minite==360){
					minite=0;
					h+=1;
					h_point.style.transform = "rotate("+h*30+"deg)";	
				}else if(minite%72==0){                       //如果分针转动72度,时针跳动一格
					var h_rot = h_point.style.transform;
					h_array = new Array;
					h_array = h_rot.split('(');
					h_now = parseInt(h_array[1]);
					//alert(h_now)
					h_now+=6;
					h_point.style.transform = "rotate("+h_now+"deg)";	
				}
			}
		se_point.style.transform = "rotate("+se_now+"deg)";
		//console.log(se_now);
	}
	
</script>
</body>
</html>
标签:
z
给个赞 1 人点赞
收藏 0 人收藏
评论 已有 0 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
还没有任何评论呢,赶紧抢先来一发吧!
wocacaca wocacaca 作者

快闪开,我要帅炸了!

作者最新