整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

自学前端开发 新版css时钟效果图

自学前端开发 新版css时钟效果图

要自学前端开发,你要的学习资料到了-前端/JAVA/PHP学习交流群,新版css时钟效果图

<!DOCTYPE html>

<html>

<head>

<metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">

<title>RunJS</title>

<style>

.clock{

width:200px;

height:200px;

border-radius:100%;

position:relative;

background-image:url(

);

background-size:100%;

}

.line{

height:4px;

background-color:red;

margin-left:-15px;

margin-top:-2px;

}

.original{

position:absolute;

left:50%;

top:50%;

width:1px;

height:1px;

float:left;

}

.clock>.point{

position:absolute;

top:50%;

left:50%;

margin-left:-5px;

margin-top:-6px;

width:3px;

height:3px;

padding:5px;

background-color:red;

border-radius:13px;

}

.original.seconds{

-webkit-animation:rotate_origin60s linear infinite;

animation:rotate_origin60s linear infinite;

}

.original.seconds>.line{

background-color:red;

width:100px;

height:2px;

}

.original.minutes{

-webkit-animation:rotate_origin3600s linear infinite;

animation:rotate_origin3600s linear infinite;

}

.original.minutes>.line{

background-color:blue;

width:80px;

height:3px;

}

.original.hours{

-webkit-animation:rotate_origin86400s linear infinite;

animation:rotate_origin86400s linear infinite;

}

.original.hours>.line{

width:60px;

background-color:green;

}

@-webkit-keyframes rotate_origin{

from{

-webkit-transform:rotateZ(0deg);

}

to{

-webkit-transform:rotateZ(360deg);

}

}

@keyframes rotate_origin{

from{

transform:rotateZ(0deg);

}

to{

transform:rotateZ(360deg);

}

}

</style>

</head>

<body>

<divclass="clock">

<divclass="original hours">

<divclass="line"></div>

</div>

<divclass="original minutes">

<divclass="line"></div>

</div>

<divclass="original seconds">

<divclass="line"></div>

</div>

<divclass="point"></div>

</div>

</body>

</html>

:最近在学习CSS3,看到了一个小案例,通过自己的学习,动手实现了它,现在把它分享出来。

钟表效果

实现过程

1.首先我们需要在页面中写出一个静态的钟表效果。首先我们需要一个表盘div wrap 对其进行简单的样式设置,用border-radius属性将其设置成圆形。


<div id="wrap"></div>
 #wrap{width:200px; height:200px; border:2px solid #000; margin:100px auto;border-radius:50%; position:relative;}

2.接下来我们用ul和li来写表盘中的刻度,对其进行简单的样式设置。其中需要注意的是,我们用 -webkit-transform-origin:center 100px;来设置我们的旋转基点。然后利用 -webkit-transform: rotate(0);让我们的li旋转相应的角度形成相应的刻度。

 <ul id="list">
 <li></li> <!--刻度-->
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul> #wrap ul{margin:0; padding:0; height:200px; position:relative; list-style:none;} #wrap ul li{width:2px; height:6px; background:#000; position:absolute; left:99px; top: 0;-webkit-transform-origin:center 100px;} #wrap ul li:nth-of-type(1){-webkit-transform: rotate(0);} #wrap ul li:nth-of-type(2){-webkit-transform: rotate(6deg);} #wrap ul li:nth-of-type(3){-webkit-transform: rotate(12deg);} 
 #wrap ul li:nth-of-type(4){-webkit-transform: rotate(18deg);} #wrap ul li:nth-of-type(5){-webkit-transform: rotate(24deg);} #wrap ul li:nth-of-type(6){-webkit-transform: rotate(30deg);} #wrap ul li:nth-of-type(7){-webkit-transform: rotate(36deg);} #wrap ul li:nth-of-type(8){-webkit-transform: rotate(42deg);} #wrap ul li:nth-of-type(5n+1){ height:12px;}

3.其中我们设计到了css3的选择器nth-of-type() ,它规定其属于其父元素的第几个li元素。

当然,我们不可能将表盘的刻度都统统去设置li的样式去完成。我们后面需要用js去渲染它。

在渲染之前,我们需要去写上我们的秒针、分针、时针。分别是div hour、min、sec,并且我们对其进行样式的设置。为了美化一下,我们再写一个div icon,圆点。并对其进行简单样式设置。

 <div id="hour"></div>
 <div id="min"></div>
 <div id="sec"></div>
 <div class="icon"></div>
 #hour{width:6px; height:45px; background:#000; position:absolute; left:97px; top:55px;-webkit-transform-origin:bottom ;}
 #min{width:4px; height:65px; background:#999; position:absolute; left:98px; top:35px;-webkit-transform-origin:bottom ;}
 #sec{width:2px; height:80px; background:red; position:absolute; left:99px; top:20px;-webkit-transform-origin:bottom ;}
 .icon{width:20px; height:20px; background:#000; border-radius:50%; position:absolute; left:90px; top: 90px;}

4.接下来我们来写一下让钟表动起来的JavaScript,首先用js去获取各个div。

 var oList=document.getElementById("list");//获取到刻度
 var oCss=document.getElementById("css"); var oHour=document.getElementById("hour");//获取时针
 var oMin=document.getElementById("min");//获取分针
 var oSec=document.getElementById("sec");//获取秒针
 var oLi=""; var sCss="";

5.接下来去渲染表盘的刻度。

 for (var i=0;i<60;i++) { //一个表盘总共是60个刻度
 sCss+="#wrap ul li:nth-of-type("+(i+1)+"){-webkit-transform: rotate("+i*6+"deg);}";
 oLi+="<li></li>";
 };
 oList.innerHTML=oLi;
 oCss.innerHTML+=sCss;//表盘刻度渲染完成

6.接下来我们去写一个钟表表针根据时间变动的函数,先利用new Date()获取时间,然后通过去改变表针的样式去让表针根据时间去转动,秒针一秒相当于旋转6度,分钟一秒相当转动6度,时针转动1秒相当于转动30度。

function toTime(){ var oDate=new Date();//获取当前时间
 var iSec=oDate.getSeconds();//获取当前秒
 var iMin=oDate.getMinutes()+iSec/60;//获取当前分
 var iHour=oDate.getHours()+iMin/60;//获取当前时
 oSec.style.WebkitTransform="rotate("+iSec*6+"deg)";//秒针转动角度1秒6度 (表盘一圈360度一圈60秒所以一秒6度)
 oMin.style.WebkitTransform="rotate("+iMin*6+"deg)";//分钟转动角度1分6度 (表盘一圈360度一圈60分所以一分6度)
 oHour.style.WebkitTransform="rotate("+iHour*30+"deg)";//时针转动角度一小时30度(表盘一圈360度一圈12小时所以一小时30度)
 };

7.最后我们来开一个定时器,让函数隔一秒执行一次。

 toTime();
 setInterval(toTime,1000);

至此一个钟表效果就写完了,下面是全部源代码

效果源码

款基于HTML5和CSS3的圆盘时钟动画,它的特点是圆盘时钟侧边带有实时更新的数字时钟,而且时钟在走动时还会发出滴答滴答的声音。

效果图

代码:

JavaScript代码:

页面布局:

css样式: