Making use of a simple clock HTML + css

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
             {
                  margin: 0;
                  padding: 0;
             }
            html,body {
                  width: 100%;
                  height: 100%;
             }
            
            / * Draw a circle, do dial * / 
             .clock { 
                   width : 400px ; 
                   height : 400px ; 
                   border : 1px Solid # FFC0CB ; 
                   border-RADIUS : 50% ; 
                  / * centering * / 
                   margin : 50px Auto ; 
                   position : relative ; 
                  background -color : # FCF9F9 ; 
                  Box-Shadow : 0 0 5px 2px;
             }

            / * Set the absolute positioning, the next operation easily * / 
             .clock> div { 
                  position : Absolute ; 
             }
             
             / * Tick * / 
             .line { 
                  width : 2px ; 
                  height : 100% ; 
                  background-Color : #ccc ; 
                  margin-left : -1px ; 
                  left : 50% ; 
             } 
             .line: First-Child { / * not set, default * /

             }
             .line:nth-child(2){
                  transform: rotate(30deg);
             }
             .line:nth-child(3){
                  transform: rotate(60deg);
             }
             .line:nth-child(4){
                  transform: rotate(90deg);
             }
             .line:nth-child(5){
                  transform: rotate(120deg);
             }
             .line:nth-child(6){
                  transform: rotate(150deg);
             }
             
             / * In a circle on the dial is then covered so that the calibration line 10px * / 
            .cover { 
                  width : by 380px ; 
                  height : by 380px ; 
                  background-Color : # fcf9f9 ; 
                  border-RADIUS : 50% ;                 
                  left : 50% ; 
                  Top : 50 % ; 
                 / * positioning * / 
                 margin-Top : -190px ; 
                  margin-left : -190px;
             }
             
            / * Hour * / 
            .h { 
                  width : 6px ; 
                  height : 90px ; 
                  background-Color : # 999 ; 
                  margin-left : -3px ; 
                  left : 50% ; 
                  Top : 100px ; 
                 / * changes the rotation point for the bottom, so that about rotation of the base * / 
                  Transform-Origin : bottom ;     
                 / *Add animation, steps (60) is an animation-timing-function animation speed curve, which means is divided into 60 stages              * / 
                  Animation : Rotate 43200s Steps (60) Infinite ; 
             }

            /* 分针 */
             .m {
                  width: 4px;
                  height: 130px;
                  background-color: #90EE90;
                  margin-left: -2px;
                  left: 50%;
                  top: 60px;
                  transform-origin:bottom;
                  animation: rotate  3600s steps(60) infinite;
             }
            
            /* 秒针 */
            .s {
                  width: 2px;
                  height: 160px;
                  background-color: pink;
                  margin-left: -1px;
                  left: 50%;
                  top: 30px;
                  transform-origin:bottom;
                  animation: rotate  60s steps(60) infinite;
             }
             
            / * Midpoint * / 
            .dotted { 
                  width : 20px ; 
                  height : 20px ; 
                  border-RADIUS : 50% ; 
                  background-Color : #CCCCCC ; 
                  left : 50% ; 
                  Top : 50% ; 
                  margin-left : -10px ; 
                  margin- Top : -10px ; 
             } 
             / * key frame animation * /
             @keyframes rotate {
                  from {
                       transform: rotate(0deg);
                  }

                  to {
                    transform: rotate(360deg);
                  }
             }
        </style>
    </head>
    <body>

             <div class="clock">     <!-- 表面 -->
                <!-- 刻度线 -->
                  <div class="line"></div>
                  <div class="line"></div>
                  <div class="line"></div>
                  <div class="line"></div>
                  <div class="line"></div>
                  <div class="line"></div>
                  <div class="cover"></div>
                 
                  <div class="h"></div>    <!-- 时针 -->
                  <div class="m"></div>    <!-- 分针 -->
                  <div class="s"></div>    <!-- 秒针 -->

                  <div class="dotted"></div>        <!-- 中间点 -->
             </div>
    </body>
</html>
Results are as follows:
Making use of a simple clock HTML + css

Guess you like
