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

来源：互联网发布：阿里云流量收费标准编辑：程序博客网时间：2024/04/30 00:50

今天来分享一个小技能，利用数学的思想和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

0 0