【学+原】CSS3的2D动画 ——仿NOMOS手表

看CSS3妙味课堂中有一课是介绍如何做钟表界面，然后三根针都能随着时间转动，然后自己在那个简易的版本上做了一些进一部改进。

1. 最关键的知识点应该是transform-origin这个样式，要选对旋转的中心点。分针秒针时针的旋转中心点应该是针的底部中间位置
2. 这个实例还是让我第一次见到把<style>设置了id，然后写进js里去操作的，因为表面的各种小时，秒的刻度的制作，需要用循环来写，直接写css样式里是不现实的。
3. 另外就是要把setInterval和transform:rotate结合起来使用，让秒钟动起来。
4. 不要忘了，在秒钟动的同时，分针和时针都在一直变化着，所以要将每一秒后三根针的位置都要同时计算，按照比例来计算分针是时针的角度

<style id="css">

ul{

margin: 0;padding: 0;

list-style: none;

}

#cover{

width: 400px;

height: 400px;

border-radius: 50%;

border: 3px solid #504f4c;

position: relative;

background: #f1f1f3;

}

#center,#icon,#icon_inner,#center_inner{

border-radius: 50%;

position: absolute;

left: 0; right: 0; top: 0; bottom: 0;

margin: auto;

}

#icon{

width: 26px;

height: 26px;

background: #0677bf;

}

#center{

width: 8px;

height: 8px;

background: #b4bea5;

z-index: 9;

}

#icon_inner{

width: 12px;

height: 12px;

background: #b94130;

}

#center_inner{

width: 4px;

height: 4px;

background: #b94130;

z-index: 9;

}

#hour{

width: 6px;

height: 105px;

position: absolute;

left: 197px;

bottom: 208px;

background:#0677bf;

border-radius: 3px;

transform-origin: 3px 110px;

z-index: 10;

}

#minute{

width: 6px;

height: 190px;

position: absolute;

left: 197px;

bottom: 205px;

background:#0677bf;

border-radius: 3px;

transform-origin: 3px 195px;

z-index: 11;

}

#second{

width: 3px;

height: 70px;

position: absolute;

left: 58.5px;

bottom: 45px;

background:#b94130;

border-radius: 2px;

transform-origin: 1.5px 55px;

}

#list_big li{

width: 1px;

height: 15px;

position: absolute;

left: 199px;

bottom: 380px;

background: #171717;

transform-origin: 1px 195px;

}

#list_small li{

width: 4px;

height: 40px;

border-radius: 2px;

position: absolute;

left: 198px;

bottom: 335px;

background: #171717;

transform-origin: 2px 175px;

}

#list_big li:nth-of-type(5n+1){

width: 4px;

border-radius: 2px;

}

#number li{

position: absolute;

height: 40px;

line-height: 40px;

left: 50%;

bottom: 330px;

font-family: "arial narrow";

font-size: 50px;

transform: translateX(-50%);

transform-origin: 50% 170px;

}

#mark{

width: 100px;

position: absolute;

top: 100px;

left: 50%;

transform: translateX(-50%);

font-family: arial;

font-weight: 400;

}

#mark_top{

position: absolute;

text-align: center;

left: 50%;

transform: translateX(-50%);

font-size: 18px;

}

#mark_bottom{

position: absolute;

top: 20px;

left: 50%;

transform: translateX(-50%);

text-align: center;

font-size: 8px;

}

#cover_inner{

width: 120px;

height: 120px;

border-radius: 50%;

background: #e0dfdb;

position: absolute;

bottom: 50px;

left: 50%;

transform: translateX(-50%);

}

#cover_inner li{

width: 2px;

height: 12px;

border-radius: 1px;

position: absolute;

left: 59px;

bottom: 103px;

background: #171717;

transform-origin: 1px 55px;

}

#cover_inner li:nth-of-type(3n+1){

width: 4px;

border-radius: 2px;

}

</style>

<script>

window.onload=function(){

var oListB = document.getElementById('list_big');

var oListS = document.getElementById('list_small');

var oListI = document.getElementById('list_inner');

var oNum = document.getElementById('number');

var oCss = document.getElementById('css');

var listBHtml = '';

var listSHtml = '';

var listIHtml = '';

var numHtml = '';

 

var oCssHtml = oCss.innerHTML;

 

for (var i=0; i<60; i++) {

listBHtml += '<li></li>';

oCssHtml += '#list_big li:nth-of-type('+ (i+1) +'){transform: rotate('+ i*6 +'deg);}'

}

 

for (var i=0; i<12; i++) {

listIHtml += '<li></li>';

oCssHtml += '#list_inner li:nth-of-type('+ (i+1) +'){transform: rotate('+ (i*30) +'deg);}'

}

 

for (var i=0; i<6; i++) {

listSHtml += '<li></li>';

oCssHtml += '#list_small li:nth-of-type('+ (i+1) +'){transform: rotate('+ (i*60+30) +'deg);}'

}

 

for (var i=0; i<6; i++) {

if(i===3){

continue;

}

oCssHtml += '#number li:nth-of-type('+ (i+1) +'){transform: translateX(-50%) rotate('+ (i*60) +'deg);}'

}

oListB.innerHTML = listBHtml;

oListS.innerHTML = listSHtml;

oListI.innerHTML = listIHtml;

oCss.innerHTML = oCssHtml;

 

var oSec = document.getElementById('second');

var oMin = document.getElementById('minute');

var oHour = document.getElementById('hour');

 

getTime();

 

setInterval(getTime,1000);

 

function getTime(){

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>

</head>

<body>

<div id="cover">

<span id="icon"></span>

<span id="center"></span>

<span id="hour"></span>

<span id="minute"></span>

<div id="mark">

<span id="mark_top">N&nbspO&nbspM&nbspO&nbspS</span>

<span id="mark_bottom">G&nbspL&nbspA&nbspS&nbspH&nbspU&nbspT&nbspT&nbspE</span>

</div>

<div id="cover_inner">

<ul id="list_inner">

</ul>

<span id="icon_inner"></span>

<span id="center_inner"></span>

<span id="second"></span>

</div>

<ul id="list_big">

</ul>

<ul id="list_small">

</ul>

<ul id="number">

<li>12</li>

<li>2</li>

<li>4</li>

<li></li>

<li>8</li>

<li>10</li>

</ul>

</div>

</body>

</html>