原生css制作钟表

原生css钟表

		***下面是效果图：***

html代码

   <!---设置时钟-->
   <div class="clock">
       <!--设置秒针-->
       <div class="second-wrapper">
           <div class="second"></div>
       </div>
       <!--设置分针-->
       <div class="minute-wrapper">
            <div class="minute"></div>
       </div>
       <!--设置时针-->
       <div class="hour-wrapper">
            <div class="hour"></div>
       </div>
       <!--设置数字-->
       <div class="num">
           <span class="twelve">12</span>
           <span class="one">1</span>
           <span class="two">2</span>
           <span class="three">3</span>
           <span class="four">4</span>
           <span class="five">5</span>
           <span class="six">6</span>
           <span class="seven">7</span>
           <span class="eight">8</span>
           <span class="nine">9</span>
           <span class="ten">10</span>
           <span class="eleven">11</span>
       </div>
       <!--给中间点-->
       <div class="dot"></div>
   </div>

css代码

    <style>
       .clock{
           width: 500px;
           height: 500px;
           background-color: #ff9999;
           margin: 50px auto;
           border-radius: 50%;
           border: 5px solid black;
           position: relative;
           /* background-image: url("./img/bg3.jpg");
           background-size: cover; */
       }
       .clock > div{
           position: absolute;
           left: 0;
           right: 0;
           top: 0;
           bottom: 0;
           margin:auto;
       }
       /*设置秒针外部*/
       .second-wrapper{
           width:50%;   
           height:90%;
           /* background-color: #bbffaa; */
           animation: run 60s infinite steps(60);
       }
       /*设置秒针*/
       .second{
           width:3px;
           height:50%;
           background-color: red;
           margin: 0 auto;
       }
       /*设置分针外部*/
       .minute-wrapper{
           width:60%;
           height:60%;
           /* background-color: blue; */
           animation: run 3600s infinite steps(60);
       }
       /*设置分针*/
       .minute{
           width: 6px;
           height: 50%;
           background-color: black;
           margin: 0 auto;
       }
       /*设置时针外部*/
       .hour-wrapper{
           width: 30%;
           height: 30%;
           /* background-color: blueviolet; */
           animation: run 43200s infinite linear;
       }
       /*设置时针*/
       .hour{
           width: 8px;
           height: 50%;
           background-color: black;
           margin: 0 auto;
       }
       .num{
           width: 100%;
           height:100%;
           border-radius: 50%;
       }
       .twelve{
            position: absolute;
            top: 0;
            left:235px;
            bottom: 0;
            margin: 0 auto;
            color: seagreen;
            font-size: 25px;
       }
       .one{
            position: absolute;
            top:30px;
            left:372px;
            bottom:0;
            color: seagreen;
            font-size: 25px;
       }
       .two{
            position: absolute;
            top:123px;
            left:458px;
            bottom:0;
            color: seagreen;
            font-size: 25px;
       }
       .three{
            position: absolute;
            top:235px;
            left:487px;
            bottom:0;
            color: seagreen;
            font-size: 25px;
       }
       .four{
            position: absolute;
            top:355px;
            left:450px;
            bottom:0;
            color: seagreen;
            font-size: 25px;
       }
       .five{
            position: absolute;
            top:442px;
            left:364px;
            bottom:0;
            color: seagreen;
            font-size: 25px;
       }
       .six{
            position: absolute;
            top:474px;
            left:242px;
            bottom:0;
            color: seagreen;
            font-size: 25px;
       }
       .seven{
            position: absolute;
            top:442px;
            left:125px;
            bottom:0;
            color: seagreen;
            font-size: 25px;
       }
       .eight{
            position: absolute;
            top:353px;
            left:35px;
            bottom:0;
            color: seagreen;
            font-size: 25px;
       }
       .nine{
            position: absolute;
            top:235px;
            left:0px;
            bottom:0;
            color: seagreen;
            font-size: 25px;
       }
       .ten{
            position: absolute;
            top:120px;
            left:30px;
            bottom:0;
            color: seagreen;
            font-size: 25px;
       }
       .eleven{
            position: absolute;
            top:30px;
            left:115px;
            bottom:0;
            color: seagreen;
            font-size: 25px;
       }
       /*设置中间圆点*/
       .dot{
           width: 20px;
           height: 20px;
           border-radius: 50%;
           background-color: black;
       }
        @keyframes run{
            from{
                transform: rotateZ(0);
              
            }
            to{
                transform: rotateZ(360deg);
        
            }
        }
    </style>