效果预览:
实现思路:使用一个盒子.clock作为时钟地盘,并为当前盒子添加伪类使其在当前盒子内部进行显示,并遮住当前盒子内部部分,再利用.line盒子进行刻度绘制,最后还需要一个盒子遮住里面多余的线条,最后再绘制时分秒。
实现代码:
html
<div class="clock">
<div class="line">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
css
body {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #2C3A47 ;
}
/*最外层的时钟边缘部分*/
.clock {
width: 400px;
height: 400px;
background: linear-gradient(to right, #EAB543,#F8EFBA,#FEA47F,#F97F51);
border-radius: 50%;
position: relative;
z-index: -2;
}
/*时钟罩住部分*/
.clock::after {
content: "";
width: 80%;
height: 80%;
background: #2C3A47;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
z-index: -1;
}
.line {
position: absolute;
width: 70%;
height: 70%;
background: #2C3A47;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/*给每一根线条设置高度*/
.line div{
width: 100%;
height: 5px;
background: #fff;
position: absolute;
top: 50%;
left: 0%;
transform-origin: 50% 50%;
}
/*旋转每一根线条*/
.line>div:nth-child(1) {
transform: rotate(0deg);
}
.line>div:nth-child(2) {
transform: rotate(30deg);
}
.line>div:nth-child(3) {
transform: rotate(60deg);
}
.line>div:nth-child(4) {
transform: rotate(90deg);
}
.line>div:nth-child(5) {
transform: rotate(120deg);
}
.line>div:nth-child(6) {
transform: rotate(150deg);
}
/*遮住中间线条*/
.line::before {
content: "";
width: 90%;
height: 90%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #2C3A47;
z-index: 2;
border-radius: 50%;
}
/*设置时钟中心旋转点*/
.line::after {
content: "";
width: 5%;
height: 5%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: #D980FA;
z-index: 2;
border-radius: 50%;
}
/*设置时 注意 该元素父元素为clock*/
.clock .hour {
width: 15%;
height: 2%;
position: absolute;
top: 50%;
left: 50%;
transform-origin: left bottom;
transform: translate(-5%,-50%);
background: #D980FA;
z-index: 2;
}
/*设置分 注意 该元素父元素为clock*/
.clock .minute {
width: 23%;
height: 2%;
position: absolute;
top: 50%;
left: 50%;
transform-origin: left bottom;
transform: translate(0%,-50%) rotate(-60deg);
background: #D980FA;
z-index: 2;
}
/*设置秒 注意 该元素父元素为clock*/
.clock .second {
width: 30%;
height: 1%;
position: absolute;
top: 50%;
left: 50%;
transform-origin: left bottom;
transform: translate(0%,0%) rotate(-60deg);
transition: 60s steps(60,start);
background: #D6A2E8;
z-index: 10;
}
/*当鼠标悬浮时 秒钟旋转*/
body:hover .second {
transform: translate(0%,-50%) rotate(360deg);
}