看到别人用css画的钟表，好奇一番，然后自己想办法实现了一个简单的效果，如下图
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>
网友评论