看到別人用css畫的鐘表啼器，好奇一番旬渠，然后自己想辦法實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的效果俱萍，如下圖
image.png
代碼，不好的地方可以討論交流
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>鐘表</title>
<style type="text/css">
.circle{
width: 200px;
height: 200px;
background-color: #faf9f9;
border-radius: 100px;
position: relative;
box-shadow: inset 1px 0px 11px 2px #ddddddcc;
}
.line{
width: 200px;
border-top: 2px solid #9c9c9c;
position: absolute;
top: 100px;
}
.line:nth-child(1){
transform: rotate(90deg);
}
.line:nth-child(2){
transform: rotate(120deg);
}
.line:nth-child(3){
transform: rotate(150deg);
}
.line:nth-child(4){
transform: rotate(180deg);
}
.line:nth-child(5){
transform: rotate(210deg);
}
.line:nth-child(6){
transform: rotate(240deg);
}
.sub-circle{
width: 180px;
height: 180px;
background-color: #faf9f9;
border-radius: 50%;
top: 10px;
left: 10px;
position: absolute;
filter: blur(3px);
}
.hour{
width: 4px;
height: 30px;
background-color: #008000;
border-radius: 30px 0 0 30px;
position: absolute;
transform: rotate(0deg);
left: 50%;
top: 36%;
transform-origin: bottom;
animation: hour 3600s linear infinite;
}
@keyframes hour{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
.minute{
width: 3px;
height: 45px;
background-color: #55aaff;
position: absolute;
transform: rotate(0deg);
left: 50%;
top: 29%;
transform-origin: bottom;
animation: hour 360s linear infinite;
}
.second{
width: 1px;
height: 60px;
background-color: #8c08ff;
position: absolute;
transform-origin: bottom;
transform: rotate(0deg);
left: 50%;
top: 21%;
animation: hour 60s linear infinite;
}
</style>
</head>
<body>
<div class="circle">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
<div class="sub-circle"></div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
</div>
</body>
</html>
