动态时钟

效果图（如下）：

代码如下：

//css代码
           .box {
                width: 300px;
                height: 300px;
                border: 5px solid silver; 
                border-radius: 50%;
                margin: auto;
                margin-top: 200px;
                position:relative;
            }
            .line-1 {
                margin-top: 147.5px;
                width: 300px;
                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);
             }
             .num {
                width: 270px;
                height: 270px;
                /* border: 1px solid red; */
                border-radius: 50%;
                position: absolute;
                background-color: white;
                margin: 15px;
             }
             .box1 {
                width: 180px;
                height: 180px;
                margin: 60px;
                /* border: 1px solid black; */
                border-radius: 50%;
                position: absolute;
                background-color: white;
             }
             .center {
                width: 20px;
                height: 20px;
                border-radius: 50px;
                background-color: silver;
                margin: 140px;
                position: absolute;
             }
             .hour {
                width: 4px;
                height:60px;
                position: absolute;
                background-color:red ;
                transform-origin: bottom;
                margin-left: 150px;
                animation-name: clock;
                animation-duration: 43200s;
                animation-iteration-count:  infinite ;
                margin-top: 90px;
             }
             .minter {
                width: 3px;
                height: 70px;
                position: absolute;
                background-color: green;
                transform-origin: bottom;
                margin-top: 80px;
                margin-left: 150px;
                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: 70px;
                margin-left: 150px;
                animation: clock 60s infinite steps(60,end  );
             }
             @keyframes clock {
                0% {
                    transform: rotate(0deg);
                }
                100%{
                    transform: rotate(360deg);
                }
             }
             span {
               font-size: 20px;
             }
             .s1 {
               float: right;
              
               margin-top: 11px;
             
               margin-right: 72px;
             }
             .s2 {
               float: right;
               margin-top: 53px;
               margin-right: -60px;
             }
             .s3 {
               float: right;
               margin-top: 122px;
               margin-right: -81px;
               font-weight: 600;
             }
             .s4 {
               float: right;
               margin-top: 188px;
               margin-right: -63px;
             }
             .s5 {
               float: right;
               margin-top: 229px;
               margin-right: -19px;
             }
             .s6 {
               float: right;
               margin-top: 247px;
               margin-right: 46px;
               font-weight: 600;
               }
             .s7 {
               float: right;
               margin-top: 228px;
               margin-right: 50px;
               }
               .s8 {
                  float: right;
                  margin-top: 189px;
                  margin-right: 32px;
               }
               .s9 {
                  float: right;
                  margin-top: -152px;
                  margin-right: 256px;
                  font-weight: 600;
               }
               .s10 {
                  float: right;
                  margin-top: -220px;
                  margin-right: 227px;
               }
               .s11 {
                  float: right;
                  margin-top: -259px;
                  margin-right: 185px;
               }
               .s12 {
                  float: right;
                  margin-top: -276px;
                  margin-right: 123px;
                  font-weight: 600;
               }
//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="num"> 
               <span class="s1">1</span>
               <span class="s2">2</span>
               <span class="s3">3</span>
               <span class="s4">4</span>
               <span class="s5">5</span>
               <span class="s6">6</span>
               <span class="s7">7</span>
               <span class="s8">8</span>
               <span class="s9">9</span>
               <span class="s10">10</span>
               <span class="s11">11</span>
               <span class="s12">12</span>
            </div>
            <div class="box1"></div>
            
            <div class="hour"></div>
            <div class="minter"></div>
            <div class="s"></div>
            <div class="center"></div>
        </div>