原生css+html制作简易时钟

先上效果图

html代码

     <!-- 时钟边框 -->
    <div class="clock">
        <!-- 分针 -->
        <div class="minute"></div>
        <!-- 秒针 -->
        <div class="second"></div>
        <!-- 数字 -->
        <span>12</span>
        <span>3</span>
        <span>6</span>
        <span>9</span>
    </div>

css样式

 .clock{
            width:400px;
            height:400px;
            border:1px solid black;
            border-radius: 50%;
            position: relative;
        }
        /* 指针的位置形状 */
        .minute{
            width:100px;
            height:30px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            background:green;
            top:185px;
            animation-duration: 3600s;   
        }
        .second{
            width:180px;
            height:20px;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            background:red;
            z-index:2;
            top:190px;
            animation-duration: 60s;
        }
        /* 定义动画 */
        @keyframes myclock{
            0%{
                transform: rotate(0);
            }
            100%{
                transform: rotate(360deg);
            }
        }
        /* 兼容不同浏览器 */
        @-o-keyframes myclock{
            0%{
                transform: rotate(0);
            }
            100%{
                transform: rotate(360deg);
            }
        }
        @-ms-keyframes myclock{
            0%{
                transform: rotate(0);
            }
            100%{
                transform: rotate(360deg);
            }
        }
        @-webkit-keyframes myclock{
            0%{
                transform: rotate(0);
            }
            100%{
                transform: rotate(360deg);
            }
        }
        @-moz-keyframes myclock{
            0%{
                transform: rotate(0);
            }
            100%{
                transform: rotate(360deg);
            }
        }
        /* 调用动画 */
        .second,.minute{
            position:absolute;
            left:50%;
            animation-name: myclock;
            animation-iteration-count: infinite;
            transform-origin:left center;
            animation-timing-function: linear;
        }
        /* 有关数字的位置样式 */
        span{
            position: absolute;
            width:60px;
            height:60px;
            font-size:40px;
            font-weight: bold;
            text-align: center;
            line-height: 60px;
        }
        span:nth-child(3){
            left:170px; 
        }
        span:nth-child(4){
         right:0;
         top:170px;   
        }
        span:nth-child(5){
            bottom:0;
            left:170px;
        }
        span:nth-child(6){
            left:0;
            top:170px;
        }

让我们的小时钟转起来吧，有疑问的可以留言哦