zoukankan      html  css  js  c++  java
  • 【学+原】CSS3的2D动画 ——仿NOMOS手表

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

    1. 最关键的知识点应该是transform-origin这个样式,要选对旋转的中心点。分针秒针时针的旋转中心点应该是针的底部中间位置
    2. 这个实例还是让我第一次见到把<style>设置了id,然后写进js里去操作的,因为表面的各种小时,秒的刻度的制作,需要用循环来写,直接写css样式里是不现实的。
    3. 另外就是要把setIntervaltransform: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>
  • 相关阅读:
    Android 编程下 Eclipse 恢复被删除的文件
    Android 编程下背景图片适配工具类
    Android 编程下 Managing Your App's Memory
    Android 编程下代码之(QQ消息列表滑动删除)
    Android 编程下 Canvas and Drawables
    Android 编程下 AlarmManager
    Android 编程下去除 ListView 上下边界蓝色或黄色阴影
    Java 编程下字符串的 16 位、32位 MD5 加密
    C#枚举类型和int类型相互转换
    MVC和普通三层架构的区别
  • 原文地址:https://www.cnblogs.com/bluefantasy728/p/5617765.html
Copyright © 2011-2022 走看看