如何利用css3来实现网页中钟表的效果

今天来分享一个小技能，利用数学的思想和css3特性的结合在网页中实现钟表的效果。

首先创建dom结构。

<div class="clock">
		<div class="lines">
			<div class="line-minute"></div>
			<div class="line-hour"></div>
		</div>
		<div class="numbers"></div>
		<div class="hands">
			<a class="hour"></a>
			<a class="minute"></a>
			<a class="second"></a>
			<a class="circle"></a>
		</div>
</div>

将钟表元素分放在两个大的div中， <div class="lines">用来存放中标的刻度， <div class="hands">用来存放钟表的指针。

下面为其创建样式

<span style="white-space:pre">		</span>/*表盘*/
<span style="white-space:pre">		</span>.clock {
			position: relative;
			width: 300px;
			height: 300px;
			border: 20px solid #333;
			border-radius: 50%;
			background-color: #292a38;
		}

		/*刻度*/
		.lines a {
			position: absolute;
			left: 50%;
			top: 50%;
			background-color: #fff;
		}
		.line-minute a {
			width: 5px;
			height: 1px;
		}
		.line-hour a {
			width: 10px;
			height: 2px;
		}

		/*数字*/
		.clock .numbers {
			position: absolute;
			height: 230px;
			width: 230px;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			font-family: 'Microsoft Yahei';
			font-size: 30px;
			color: #fff;
		}
		.numbers a {
			position: absolute;
			transform: translate(-50%, -50%);
		}


		/*指针*/
		.clock .hands {
			position: absolute;
			left: 50%;
			top: 50%;
		}
		.hands a {
			position: absolute;
			left: 0;
			top: 0;
			background-color: #fff;
			transform-origin: 0 50%;
		}
		.hands a.circle {
			width: 0;
			height: 0;
			border: 6px solid #fff;
			border-radius: 50%;
			transform: translate(-50%, -50%);
		}
		.hands a.hour {
			top: -2px;
			width: 60px;
			height: 4px;
		}
		.hands a.minute {
			top: -1px;
			width: 80px;
			height: 2px;
		}
		.hands a.second {
			width: 100px;
			height: 1px;
		}

对于样式，这里不做过多的讲解。

接下来我们来讲解一下钟表的指针运动的算法。

首先来说秒针，表盘中秒针转一圈走60步，所以：1s = 360°/60步 = 6°

同理，1min = 6°，

时针转一圈走12步，所以：1h = 360°/12步 = 30°。

这里我们再来讲解一下钟表效果中所用到的css3的旋转特性：

transform:

1.rotate:用法：transform:rotate(30deg),来进行基于网页中x轴和y轴的旋转，通过对transform-origin来设置旋转中心

transform:translate,来设置水平方向和垂直方向的位移。

所以我们用js来动态生成表盘的刻度（由于要对刻度设置不同角度所以采用js动态生成的放是来进行表盘刻度角度的设置）

同时采用刚才所讲解的数学原理以及css的结合，来对表盘的指针进行修饰。

	(function(){

		var panel = $('.clock');
		var hands = $('.hands'),
			hHand = hands.find('.hour'),
			mHand = hands.find('.minute'),
			sHand = hands.find('.second');


		/*
		 * 绘制刻度
		 */
		function displayLines(type, wrap, lineWidth){
			var total, lineWidth;
			if(type == "hour"){
				total = 4;
			}else if(type == "minute"){
				total = 60;
			}

			var gap = 360/total;
			var translateX = Math.ceil(panel.width()/2) - lineWidth - 5;  // 表盘宽度-线宽度-留白
			var strHtml = '';
			for(var i=0; i<total; i++){
				var myAngle = gap*i;
				strHtml += '<a style="transform:' + 'rotateZ(' + myAngle + 'deg) translate('+ translateX +'px, -50%)' + '; transform-origin:left center"></a>';
			}
			wrap.html(strHtml);
		}
		displayLines('minute', $('.line-minute'), 5);
		displayLines('hour', $('.line-hour'), 10);


		/*
		 * 绘制数字
		 */
		function displayNumber(wrap){
			var numbers = [1,2,3,4,5,6,7,8,9,10,11,12],
				start = -60,
				end = 300;

			var radius = wrap.width()/2,
				gap = 360/numbers.length,
				radian = Math.PI/180;

			var strHtml = '';
			$.each(numbers, function(index,num){
				var myAngle = (start+gap*index) * radian;

				var myX = radius + radius*Math.cos(myAngle),
					myY = radius + radius*Math.sin(myAngle);

				strHtml += '<a style="left:' + myX + 'px; top:'+ myY +'px">' + num + '</a>';
			});
			wrap.html(strHtml);
		}
		displayNumber($('.numbers'));


		/*
		 * 时钟转动
		 */
		function clock(){
			setInterval(function(){
				var now = new Date(),
					hour = now.getHours(),
					minute = now.getMinutes(),
					second = now.getSeconds();

				var sAngle = second*6,
					mAngle = minute*6 + (second/60)*6,
					hAngle = (hour%12)*30 + Math.floor((minute/60)*30);

				sHand.css('transform', 'rotateZ(' + (sAngle-90) + 'deg)');
				mHand.css('transform', 'rotateZ(' + (mAngle-90) + 'deg)');
				hHand.css('transform', 'rotateZ(' + (hAngle-90) + 'deg)');

				document.title = hour + ':' + minute + ':' + second;

			}, 1000);
		}
		clock();

	})();

这样在页面中一个简单的表盘就做好了，各位亲，文章原创转载请说明出处。。

效果地址http://codepen.io/Wineki/pen/azrQKO