【学+原】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>