使用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所以只能从固定的点开始计时