小编给大家分享一下css3如何利用transform打造走动的2D时钟，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
利用transform的旋转rotate打造一个时钟，再结合JavaScript的定时器让它走起来。
截一个动图：
案例知识点分析：
利用定位完成时钟的绘制。
背景使用了放射性渐变。
利用JavaScript完成刻度和时间数字的旋转。
利用Date()对象获取系统时间，并让时针指向对应的刻度。
利用定时器不断更新时间，完成时针的运动。
一、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="sec"></div> <div id="circle"></div></div>二、CSS样式
<style id="css">body,ul{margin:0;padding:0;}body{font:1em "microsoft Yahei";color:#666;background-color:#333;}h2{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;height: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-radius:50%;background:radial-gradient(circle at center,#667eea,#764ba2);box-shadow:0 0 50px rgba(0,0,0,0.5) inset; }#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; }#clock li:nth-child(5n+1){ 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, Helvetica, sans-serif;transform-origin:center 180px;}#hour,#min,#sec{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;margin-left:-7px;margin-top:-100px;border-radius:3px;}#min{width:10px;height:150px;margin-left:-5px;margin-top:-150px;border-radius:2px;}#sec{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 oSec=document.getElementById("sec");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(); //初始化函数。setInterval(myTime,1000); //设置定时器，每隔1秒执行一次函数。function myTime(){var oDate=new Date();var iSec=oDate.getSeconds(); //精确到秒数的分钟数。var iMin=oDate.getMinutes()+iSec/60; //精确到分秒的小时数。可以在旋转的时候更精确。var iHour=oDate.getHours()+iMin/60;oSec.style.transform="rotate("+iSec*6+"deg)" ;oMin.style.transform="rotate("+iMin*6+"deg)";oHour.style.transform="rotate("+iHour*30+"deg)"; //时针的指向需要把分钟和秒数算进去才精确。}}</script>以上是“css3如何利用transform打造走动的2D时钟”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注编程网行业资讯频道！
