旋转时钟

旋转始终

//css代码：
            .box {
                width: 200px;
                height: 200px;
                border: 5px solid silver; 
                border-radius: 50%;
                margin: auto;
                margin-top: 200px;
                position:relative;
            }
            /* .line {
                width: 200px;
                height: 5px;
                background-color: silver;
                margin-top: 5px;
                line-height: 200px;

            } */
            .line-1 {
                margin-top: 97.5px;
                width: 200px;
                height: 5px;
                background-color: silver;
                position: absolute;
             } 
             .line-1:nth-of-type(1){
                transform: rotate(30deg);
             }
             .line-1:nth-of-type(2){
                transform: rotate(60deg);
             }
             .line-1:nth-of-type(3){
                transform: rotate(90deg);
             }
             .line-1:nth-of-type(4){
                transform: rotate(120deg);
             }
             .line-1:nth-of-type(5){
                transform: rotate(150deg);
             }
             .box1 {
                width: 150px;
                height: 150px;
                margin: 25px;
                /* border: 1px solid black; */
                border-radius: 50%;
                position: absolute;
                background-color: white;
             }
             .center {
                width: 20px;
                height: 20px;
                border-radius: 50px;
                background-color: silver;
                margin: 90px;
                position: absolute;
             }
             .hour {
                width: 4px;
                height:60px;
                position: absolute;
                background-color:red ;
                transform-origin: bottom;
                margin-left: 100px;
                animation-name: clock;
                animation-duration: 43200s;
                animation-iteration-count:  infinite ;
                margin-top: 40px;
             }
             .minter {
                width: 3px;
                height: 70px;
                position: absolute;
                background-color: green;
                transform-origin: bottom;
                margin-top: 30px;
                margin-left: 100px;
                animation-name: clock;
                animation-duration: 3600s;
                animation-iteration-count: infinite;  
             }
             .s {
                width: 1px;
                height: 80px;
                position: absolute;
                background-color: blue; 
                transform-origin: bottom;
                margin-top: 20px;
                margin-left: 100px;
                animation: clock 60s infinite steps(60,end  );
             }
             @keyframes clock {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
             }
//html代码：
       <div class="box">
            <div class="line-1"></div>
            <div class="line-1"></div>
            <div class="line-1"></div>
            <div class="line-1"></div>
            <div class="line-1"></div>
            <div class="line-1"></div>
            <div class="box1"></div>
            
            <div class="hour"></div>
            <div class="minter"></div>
            <div class="s"></div>
            <div class="center"></div>
        </div>