css3 利用transform打造走动的2D时钟

学完了transform这个课程，还是来一个案例吧，利用transform的旋转rotate打造一个时钟，再结合javascript的定时器让它走起来。

截一个动图：

案例知识点分析：

1、利用定位完成时钟的绘制。

2、背景使用了放射性渐变。

3、利用javascript完成刻度和时间数字的旋转。

4、利用date()对象获取系统时间，并让时针指向对应的刻度。

5、利用定时器不断更新时间，完成时针的运动。

一、html源代码

<div id="clock-wrap"><div id="clock">    <ul id="list">        </ul>    </div>    <div id="num">    <ul>        <li>12</li>            <li>1</li>            <li>2</li>            <li>3</li>            <li>4</li>            <li>5</li>            <li>6</li>            <li>7</li>            <li>8</li>            <li>9</li>            <li>10</li>            <li>11</li>        </ul>    </div>    <div id="hour"></div>    <div id="min"></div>    <div id="c"></div>    <div id="circle"></div></div>

二、css样式

<style id="css">/*注意这里为style标签添加了一个id，在javascript里面有获取，并往里面添加css样式。*/body,ul{margin:0;padding:0;}body{font:1em "microsoft yahei";color:#666;background-color:#333;}h1{text-align:center;color:#eee;font-size:3rem;}li{list-style:none;}p{text-align:center;color:#ddd;position:relative;top:100px;}a{color:#999;text-decoration:none;transition:0.2s;}a:hover{color:#ddd;}#clock-wrap{width:400px;heig江苏舜天足球队ht:400px;border:10px solid #fff;border-radius:50%;margin:80px auto 0;position:relative;box-shadow:0 0 40px rgba(0,0,0,1)}#clock ul{width:400px;height:400px;position:relative;border-ra黄豆发芽的过程dius:50%;background:radial-gradient(circle at center,#667eea,#764ba2);box-shadow:0 0 50px rgba(0,0,0,0.5) int; /*设置内阴影*/}#clock ul li{position:absolute;left:50%;margin-left:-2px;top:0;width:4px;height:10px;background:rgba(255,255,255,.5);transform-origin:center 200px; /*li的旋转中心点在圆形中间。*/}#clock li:nth-child(5n+1){ /*5个刻度为一组，每一组的第一个刻度要长一点。*/height:18px;}#num{position:absolute;width:360px;height:360px;left:0;right:0;top:0;bottom:0;margin:auto;}#num li{position:absolute;left:50%;margin-left:-10px;top:0;color:rgba(255,255,255,.5);font:2em arial, hel什么是视频剪辑vetica, sans-rif;transform-origin:center 180px;}#hour,#min,#c{background:#fff;position:absolute;left:50%;top:50%;transform-origin:bottom; /*时针的旋转点在自己的底部。*/box-shadow:0 0 6px rgba(0,0,0,.5)}#hour{width:14px;height:100px;marg简短的高级情话in-left:-7px;margin-top:-100px;border-radius:3px;}#min{width:10px;height:150px;margin-left:-5px;margin-top:-150px;border-radius:2px;}#c{width:4px;height:180px;margin-left:-2px;margin-top:-180px;border-radius:1px;}#circle{width:40px;height:40px;border-radius:50%;background:#fff;position:absolute;left:50%;margin-left:-20px;top:50%;margin-top:-20px;box-shadow:0 0 20px rgba(0,0,0,.4)}</style>

三、javascript代码

<script>window.onload=function(){var olist=document.getelementbyid("list");var ocss=document.getelementbyid("css"); //style标签也可以加id属性。var anums=document.getelementbyid("num").getelementsbytagname("li");var ohour=document.getelementbyid("hour");var omin=document.getelementbyid("min");var oc=document.getelementbyid("c");var ali="";var scss="";for(var i=0;i<60;i++){ //循环60次，产生刻度值和每一个刻度旋转的度数。ali+="<li></li>";scss+="#clock li:nth-child("+(i+1)+"){transform:rotate("+i*6+"deg);}"}for(var i=0;i<12;i++){scss+="#num li:nth-child("+(i+1)+"){transform:rotate("+i*30+"deg);}"}olist.innerhtml=ali;ocss.innerhtml+=scss;  //css需要追加到原来的css文档中。mytime();  //初始化函数。tinterval(mytime,1000);    //设置定时器，每隔1秒执行一次函数。function mytime(){var odate=new date();var ic=odate.getconds(); //精确到秒数的分钟数。var imin=odate.getminutes()+ic/60; //精确到分秒的小时数。可以在旋转的时候更精确。var ihour=odate.gethours()+imin/60;oc.style.transform="rotate("+ic*6+"deg)" ;omin.style.transform="rotate("+imin*6+"deg)";ohour.style.transform="rotate("+ihour*30+"deg)"; //时针的指向需要把分钟和秒数算进去才精确。}}</script&g安妮宝贝 春宴t;

以上就是css3 利用transform打造走动的2d时钟的详细内容，更多关于css3 transform的资料请关注www.887551.com其它相关文章！