前端代码编写小时钟

前端代码编写小时钟

没有用到图片，指针也是自己用自己写的。主要难度就在于指针位置的固定与旋转。

* {
   
            margin: 0;
            padding: 0;
        }

        #one {
   
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
            width: 750px;
            height: 150px;
            border: 1px solid;
            border-radius: 10px;
            background: linear-gradient(#086cc1, #6ba9e1);
            color: white;
        }

        li {
   
            display: flex;
            justify-content: center;
            align-items: center;
            list-style: none;
            float: left;
            width: 250px;
            height: 100px;
        }

        #clock {
   
            width: 100px;
            height: 100px;
            border: 1px solid;
            border-radius: 50px;
            position: relative;
            left: 30px;
            transform: rotate(-90deg);
        }

        #clock .bg {
   
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #fff;
            position: absolute;
            left: 50%;
            top: 50%;
        }

        #clock .point {
   
            position: absolute;
            left: 50%;
            top: 50%;
        }

        #clock #hour {
   
            width: 30px;
            height: 2px;
            background: #fff;
            margin: -1px 0 0 0 0;
            transform-origin: 0 0.5px;
            border-radius: 10px;
        }

        #clock #minute {
   
            width: 40px;
            height: 2px;
            background: black;