效果如下圖
下面是html代碼
<div class="box">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="line line5"></div>
<div class="line line6"></div>
<div class="roundness circle"></div>
<div class="needle hour"></div>
<div class="needle minute"></div>
<div class="needle second"></div>
<div class="roundness cir"></div>
</div>
首先是外圓,給類box添加樣式
.box {
margin: 100px auto;
width: 300px;
height: 300px;
border-radius: 50%;
border: 10px solid #cccccc;
position: relative;
}
然後是畫上刻度,給類line，line1 — line6添加樣式
.box > .line {
height: 300px;
width: 10px;
position: absolute;
background-color: #cccccc;
left: 50%;
transform: translate(-50%, 0);
}
.box > .line2 {
width: 7px;
transform: translate(-50%, 0) rotateZ(30deg);
}
.box > .line3 {
width: 7px;
transform: translate(-50%, 0) rotateZ(60deg);
}
.box > .line4 {
transform: translate(-50%, 0) rotateZ(90deg);
}
.box > .line5 {
width: 7px;
transform: translate(-50%, 0) rotateZ(120deg);
}
.box > .line6 {
width: 7px;
transform: translate(-50%, 0) rotateZ(150deg);
}
然後加一個圓,把中間的線遮住,給類roundness(公共樣式—最後有個小圓會用到) circle添加樣式
.roundness {
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.circle {
width: 270px;
height: 270px;
background-color: #fff;
}
下面是給時、分、秒針，給類needle(公共樣式) hour minute second添加樣式，並添加動畫效果
.needle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
}
.hour {
width: 10px;
height: 70px;
background-color: limegreen;
border-radius: 5px 5px;
/*設置旋轉軸心*/
transform-origin: center bottom;
/*添加動畫*/
animation: clockanimation 43200s linear infinite;
}
.minute {
width: 7px;
height: 90px;
background-color: yellow;
border-radius: 3.5px 3.5px;
/*設置旋轉軸心*/
transform-origin: center bottom;
/*添加動畫*/
animation: clockanimation 3600s linear infinite;
}
.second {
width: 4px;
height: 110px;
background-color: red;
border-radius: 2px 2px;
/*設置旋轉軸心*/
transform-origin: center bottom;
/*添加動畫*/
animation: clockanimation 60s linear infinite ;
}
@keyframes clockanimation {
0% {
transform: translate(-50%, -100%);
}
100% {
transform: translate(-50%, -100%) rotate(360deg);
}
}
最後在中心加一個小圓
.cir {
width: 20px;
height: 20px;
background-color: #ccc;
}
下面是完整代碼
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>時鐘案例</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
margin: 100px auto;
width: 300px;
height: 300px;
border-radius: 50%;
border: 10px solid #cccccc;
position: relative;
}
.box>.line {
height: 300px;
width: 10px;
position: absolute;
background-color: #cccccc;
left: 50%;
transform: translate(-50%, 0);
}
.box>.line2 {
width: 7px;
transform: translate(-50%, 0) rotateZ(30deg);
}
.box>.line3 {
width: 7px;
transform: translate(-50%, 0) rotateZ(60deg);
}
.box>.line4 {
transform: translate(-50%, 0) rotateZ(90deg);
}
.box>.line5 {
width: 7px;
transform: translate(-50%, 0) rotateZ(120deg);
}
.box>.line6 {
width: 7px;
transform: translate(-50%, 0) rotateZ(150deg);
}
.roundness {
border-radius: 50%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.circle {
width: 270px;
height: 270px;
background-color: #fff;
}
.needle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -100%);
}
.hour {
width: 10px;
height: 70px;
background-color: limegreen;
border-radius: 5px 5px;
/*設置旋轉軸心*/
transform-origin: center bottom;
/*添加動畫*/
animation: clockanimation 43200s linear infinite;
}
.minute {
width: 7px;
height: 90px;
background-color: yellow;
border-radius: 3.5px 3.5px;
/*設置旋轉軸心*/
transform-origin: center bottom;
/*添加動畫*/
animation: clockanimation 3600s linear infinite;
}
.second {
width: 4px;
height: 110px;
background-color: red;
border-radius: 2px 2px;
/*設置旋轉軸心*/
transform-origin: center bottom;
/*添加動畫*/
animation: clockanimation 60s linear infinite;
}
@keyframes clockanimation {
0% {
transform: translate(-50%, -100%);
}
100% {
transform: translate(-50%, -100%) rotate(360deg);
}
}
.cir {
width: 20px;
height: 20px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="box">
<div class="line line1"></div>
<div class="line line2"></div>
<div class="line line3"></div>
<div class="line line4"></div>
<div class="line line5"></div>
<div class="line line6"></div>
<div class="roundness circle"></div>
<div class="needle hour"></div>
<div class="needle minute"></div>
<div class="needle second"></div>
<div class="roundness cir"></div>
</div>
</body>
</html>