js实现动态罗盘时钟

HTML:

 <script src="//code.jquery.com/jquery-3.3.1.js"></script>
 <script>
        var w_resize = function(){
            var w_fontsize = document.documentElement.clientWidth/750 * 100;
            if(w_fontsize > 100){w_fontsize = 100}
            document.documentElement.style.fontSize = w_fontsize+"px";
        }
        w_resize();
        window.onresize = w_resize;
    </script>
<div class="main" >
        <div class="year">2019年
            <div class="br"></div>
        </div>
        <div class="page mpage"></div>
        <div class="page dpage"></div>
        <div class="page hpage"></div>
        <div class="page minpage"></div>
        <div class="page spage"></div>
        
    </div>

CSS:

*{margin:0;padding:0}
        .main{
            width: 7.5rem;
            height: 7.5rem;
            background: #999;
            overflow: hidden;
            position: relative;
            font-size: 0.14rem;
            margin: auto;
        }
        .page{
            width: 7.5rem;
            height: 7.5rem;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            transition: all 0.3s linear;
        }
        .year{
            width: 4.03rem;
            height: 0.4rem;
            color: #fff;
            text-align: right;
            line-height: 0.4rem;
            margin-top: 3.55rem;
            position: relative;
            overflow: hidden;
        }
        .year::after{
            content:"";
            position: absolute;
            bottom: 0;
            height: 1px;
        }
        .month{
            width: 2rem;
            height: 0.4rem;
            top: 3.55rem;
            left: 2.75rem;
            line-height: 0.40rem;
            position: absolute;
            transition: all 1s linear;
        }
        .date{
            width: 3