css画钟表_CSS绘制时钟

效果图：

时钟.gif

解析:

1.利用transform: rotate(60deg);旋转实现刻度和指针

2.hover时添加旋转动画

代码如下：

Title

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background: #9dbac4;

}

main {

position: relative;

width: 400px;

height: 400px;

background: #3d71af;

border-radius: 50%;

box-shadow: 0 0 10px rgba(130, 195, 230, 0.7);

}

main::before {

position: absolute;

left: 0;

top: 0;

content: '';

width: 100%;

height: 100%;

border-radius: 50%;

transform: scale(1.1);

background: radial-gradient(at center, #ffbec1 20%, #edb547, #51c6dc, #a3ed8c,#d993ff);

z-index: -1;

}

main .line>div {

position: absolute;

left: 50%;

top: 50%;

width: 10px;

height: 95%;

background: #abd3ff;

}

main .line>div:nth-child(1) {

transform: translate(-50%, -50%) rotate(0deg);

}

main .line>div:nth-child(2) {

transform: translate(-50%, -50%) rotate(30deg);

}

main .line>div:nth-child(3) {

transform: translate(-50%, -50%) rotate(60deg);

}

main .line>div:nth-child(4) {

transform: translate(-50%, -50%) rotate(90deg);

}

main .line>div:nth-child(5) {

transform: translate(-50%, -50%) rotate(120deg);

}

main .line>div:nth-child(6) {

transform: translate(-50%, -50%) rotate(150deg);

}

main>div[class="mark"] {

position: absolute;

width: 100%;

height: 100%;

left: 0%;

top: 0%;

background: #3d71af;

border-radius: 50%;

transform: scale(.8);

}

main>.point {

width: 20px;

height: 20px;

background: #e7e587;

border-radius: 50%;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

z-index: 2;

}

main .hour {

width: 9px;

position: absolute;

height: 25%;

background: #e2a381;

left: 50%;

bottom: 50%;

transform: translate(-50%, 0);

border-radius: 10px;

}

main .minute {

width: 6px;

position: absolute;

height: 35%;

background: #bcdb82;

left: 50%;

bottom: 50%;

transform-origin: left bottom;

transform: translate(-50%, 0) rotate(60deg);

border-radius: 10px;

}

main .second {

width: 2px;

position: absolute;

height: 35%;

background: #9bf1ec;

left: 50%;

bottom: 50%;

transform-origin: left bottom;

transform: translate(-50%, 0) rotate(90deg);

border-radius: 3px;

}

main:hover .second {

transition: 10s;

transform: rotate(260deg);

}

main .text {

font-size: 1.2em;

color: white;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, 20px);

text-transform: uppercase;

opacity: .5;

text-align: center;

}

css时钟