利用transform打造走动的2D时钟
访问网址：利用transform打造走动的2D时钟_案例集_一半设计一半前端
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样式：
<title>利用transform打造走动的2D时钟</title>
<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;
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;/*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, 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>
<script>
window.οnlοad=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;
//css需要追加到原来的css文档中。
oCSS.innerHTML+=sCSS;
//初始化函数
myTime();
//设置定时器，每隔1秒执行一次函数
setInterval(myTime,1000);
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>
预览效果：
