纯css3制作简易钟表时钟

使用css3制作简易钟表

效果

html代码

 <div class="clock" >
        <!-- 指針 -->
        <div class="hour"></div>
        <div class="point"></div>
        <div class="seconds"></div>
        <!-- 黑点 -->
        <div class="center"></div>
        <!-- 大刻度 -->
        <div class="div1"></div>
        <div class="div2"></div>
        <!-- 大刻度遮zao -->
        <div class="p1"></div>
        <!-- 中刻度 -->
        <div class="div3"></div>
        <div class="div4"></div>
        <div class="div5"></div>
        <div class="div6"></div>
        <!-- 小刻度 -->
        <div class="s1"></div>
        <div class="s2"></div>
        <div class="s3"></div>
        <div class="s4"></div>
        <div class="s5"></div>
        <div class="s6"></div>
        <div class="s7"></div>
        <div class="s8"></div>
        <div class="s9"></div>
        <div class="s10"></div>
        <div class="s11"></div>
        <div class="s12"></div>
        <div class="s13"></div>
        <div class="s14"></div>
        <div class="s15"></div>
        <div class="s16"></div>
        <div class="s17"></div>
        <div class="s18"></div>
        <div class="s19"></div>
        <div class="s20"></div>
        <div class="s21"></div>
        <div class="s22"></div>
        <div class="s23"></div>
        <div class="s24"></div>
        <!-- 大遮罩 -->
        <div class="p2"></div>
    </div>

具体的思路就是外边是一个大的圆

.clock {
    width: 500px;
    height: 500px;
    /* border: 8px solid black; */
    border-radius: 50%;
    position: relative;
    left: calc(50% - 250px);
    z-index: 25;
}

中是一个小的圆点在中心

.center {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: gray;
    position: absolute;
    left: calc(250px - 10px);
    top: calc(50% - 10px);
    z-index: 20;
}

时针分针秒针都是使用细的长方形

.hour {
    width: 14px;
    height: 100px;
    background-color: black;
    position: absolute;
    left: calc(250px - 7px);
    top: calc(50% - 100px);
    z-index: 19;
}

.point {
    width: 10px;
    height: 140px;
    background-color: blue;
    position: absolute;
    left: calc(250px - 5px);
    top: calc(50% - 140px);
    z-index: 18;
}

.seconds {
    width: 8px;
    height: 180px;
    background-color: green;
    position: absolute;
    left: calc(250px - 4px);
    top: calc(50% - 180px);
    z-index: 17;
    animation: sec 5s linear 0s;
    transform-origin: bottom left;
}

大的刻度用两个不同的长方形做成一个十字架的形状

.div1 {
    width: 8px;
    height: 500px;
    background-color: black;
    position: absolute;
    left: calc(250px - 4px);
    z-index: 15;
}

.div2 {
    width: 500px;
    height: 8px;
    background-color: black;
    position: absolute;
    top: calc(50% - 4px);
    z-index: 15;
}

用一个小的白圆盖在这个十字架上使用z-index让圆覆盖在十字架上被时针分针秒针盖住

.p1 {
    width: 430px;
    height: 430px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    left: calc(250px - 215px);
    top: calc(50% - 215px);
    z-index: 16;
}

剩下的10个中等刻度宽度比大刻度细一些，使用 transform: rotate();让他倾斜就可以一个格子30度

.div3 {
    width: 6px;
    height: 500px;
    background-color: black;
    position: absolute;
    left: calc(250px - 4px);
    z-index: 15;
    transform: rotate(30deg);
}

.div4 {
    width: 6px;
    height: 500px;
    background-color: black;
    position: absolute;
    left: calc(250px - 4px);
    z-index: 15;
    transform: rotate(60deg);
}

.div5 {
    width: 6px;
    height: 500px;
    background-color: black;
    position: absolute;
    left: calc(250px - 4px);
    z-index: 15;
    transform: rotate(120deg);
}

.div6 {
    width: 6px;
    height: 500px;
    background-color: black;
    position: absolute;
    left: calc(250px - 4px);
    z-index: 15;
    transform: rotate(150deg);
}

剩下的小刻度方法差不多
举个例子，让他转6度

.s1 {
    width: 4px;
    height: 500px;
    background-color: black;
    position: absolute;
    left: calc(250px - 2px);
    z-index: 12;
    transform: rotate(6deg);
}

最后使用一个比覆盖十字架的大一些的大圆让他盖住小的柱子
图层让他小于大刻度的图层

注意
1.使用z-index设置图层
中心圆点 > 时针 > 分针 > 秒针 >大刻度遮罩层>12个大的刻度>小刻度的圆>小刻度
2.在定位的时候使用绝对定位top和left时，使用calc()可以让元素到达中心点
比如 calc( 50% - 元素的宽或高 )减号左右一定要用空格分隔

表针转动

让表针转动可以使用

  transform-origin: bottom center;

让旋转中心点到下部的中心点

倒计时五秒

@keyframes sec {
    0% {
        transform: rotate(330deg);
    }
    20% {
        transform: rotate(336deg);
    }
    40% {
        transform: rotate(342deg);
    }
    60% {
        transform: rotate(348deg);
    }
    80% {
        transform: rotate(354deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

获取当前时间要用到js所以只能从固定的点开始计时