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

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

标签：

原文地址：http://www.cnblogs.com/bluefantasy728/p/5617765.html