动画时钟

作者: Victor细节 | 来源:发表于2017-01-10 22:11 被阅读0次

时钟动画
动画时钟
iOS动画(一)：时钟动画(Swift)
简单的时钟动画
前端特效demo | 一起围观 10 种创意时钟
Canvas 绘制动画时钟
css动画小练习——时钟
定时器弹框、定时器基本用法、定时器动画、时钟
CSS动画篇之炫酷时钟之时钟墙
iOS开发集锦之 2017.05.18(iOS动画系列)

Paste_Image.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .face{
                width: 500px;
                height: 500px;
                border: 20px solid blue;
                border-radius: 50%;
                margin: 100px auto;
                position: relative;
                overflow: hidden;
            }
            .hourNum{
                display: inline-block;
                width: 40px;
                height: 40px;
                font-size: 40px;
                font-weight: bold;
            }
            .point{
                width: 500px;
                height: 10px;
                /*background-color: black;*/
                position: absolute;
                top: 245px;
                float: left;
                margin: 0 0;
                
            }
            .point span{
                margin: -18px 10px;
            }
            .point span:nth-child(1){
                float: left;
            }
            .point span:nth-child(2){
                float: right;
            }
            .point:nth-child(1){
                transform: rotate(-90deg);
            }
            .point:nth-child(1) span{
                transform: rotate(90deg);
            }
            .point:nth-child(2){
                transform: rotate(-60deg);
            }
            .point:nth-child(2) span{
                transform: rotate(60deg);
            }
            .point:nth-child(3){
                transform: rotate(-30deg);
            }
            .point:nth-child(3) span{
                transform: rotate(30deg);
            }
            .point:nth-child(5){
                transform: rotate(30deg);
            }
            .point:nth-child(5) span{
                transform: rotate(-30deg);
            }
            .point:nth-child(6){
                transform: rotate(60deg);
            }
            .point:nth-child(6) span{
                transform: rotate(-60deg);
            }
            
            .hPoint{
                width: 200px;
                height: 30px;
                /*background-color: red;*/
                position: absolute;
                top: 235px;
                left: 150px;
            }
            .hHalf{
                width: 100px;
                height: 30px;
                background-color: red;
                float: right;
            }
            .mPoint{
                width: 300px;
                height: 20px;
                /*background-color: yellow;*/
                position: absolute;
                top: 240px;
                left: 100px;
            }
            .mHalf{
                width: 150px;
                height: 20px;
                background-color: yellow;
                float: right;
            }
            .sPoint{
                width: 400px;
                height: 10px;
                /*background-color: green;*/
                position: absolute;
                top: 245px;
                left: 50px;
                
            }
            .sHalf{
                width: 200px;
                height: 10px;
                background-color: green;
                float: right;
            }
            .center{
                width: 50px;
                height: 50px;
                background-color: yellow;
                position: absolute;
                top: 225px;
                left: 225px;
                border-radius: 50%;
            }
        </style>
    </head>
    <body>
        <div class="face">
            <div class="point">
                <span class="hourNum">6</span>
                <span class="hourNum">12</span>
            </div>
            <div class="point">
                <span class="hourNum">7</span>
                <span class="hourNum">1</span>
            </div>
            <div class="point">
                <span class="hourNum">8</span>
                <span class="hourNum">2</span>
            </div>
            <div class="point">
                <span class="hourNum">9</span>
                <span class="hourNum">3</span>
            </div>
            <div class="point">
                <span class="hourNum">10</span>
                <span class="hourNum">4</span>
            </div>
            <div class="point">
                <span class="hourNum">11</span>
                <span class="hourNum">5</span>
            </div>
            <div class="hPoint"><div class="hHalf"></div></div>
            <div class="mPoint"><div class="mHalf"></div></div>
            <div class="sPoint"><div class="sHalf"></div></div>
            <div class="center"></div>
        </div>
        <script type="text/javascript">
            var h = document.querySelector(".hPoint");
            var m = document.querySelector(".mPoint");
            var s = document.querySelector(".sPoint");
            var timer = setInterval(timeRun,50);
            function timeRun(){
                var date = new Date();
                var seconds = date.getSeconds();
                var hours = date.getHours();
                var minutes = date.getMinutes();
                var angle1 = seconds*6-90;
                var angle2 = (minutes+seconds/60)*6-90;
                var angle3 = (hours+minutes/60)*30-90;
                s.style.transform = "rotate(" + angle1 + "deg)";
                m.style.transform = "rotate(" + angle2 + "deg)";
                h.style.transform = "rotate(" + angle3 + "deg)";
            }
        </script>
    </body>
</html>