版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
1.需求:
2.分析
时钟分为表框,12个刻度,时分秒针。
① 表框可以用大的box。
② 刻度可以先写好一根刻度,剩下5根只需要进行旋转30°,60°....再用一个白色的cover覆盖中间位置,就把表框和刻度做完了。
③ 时分秒针,中间圆点都是一个div,只需要用left,margin,tranform进行定位就行了。
3.完整代码(注释详细)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
margin: 100px auto;
border:6px solid #ccc;
border-radius:203px;
position: relative;
}
/* box里div的公用属性 */
.box>*{
position: absolute;
}
.line{
width: 6px;
height: 200px;
border: 1px solid #ccc;
background: #ccc;
/*刻度线居中*/
left: 50%;
top:0%;
/*向左移刻度的50%*/
transform: translate(-50%);
}
/*下面5条刻度样式基本相同*/
.line2{
transform: translate(-50%) rotate(30deg);
}
.line3{
transform: translate(-50%) rotate(60deg);
}
.line4{
transform: translate(-50%) rotate(90deg);
}
.line5{
transform: translate(-50%) rotate(120deg);
}
.line6{
transform: translate(-50%) rotate(150deg);
}
.cover{
width: 180px;
height: 180px;
background:#FFF;
border-radius: 100%;
margin: 5%;
}
.hour{
width: 8px;
height: 50px;
background: #591b2d;
left: 50%;
top: 50%;
transform: translate(-50%,-100%);
/* 改变旋转中心 */
transform-origin: center bottom;
/* 60s完成 匀速 无限循环 */
animation: animationColor 43200s linear infinite;
}
.minute{
width: 4px;
height: 60px;
background: blue;
left: 50%;
top: 50%;
transform: translate(-50%,-100%);
/* 改变旋转中心 */
transform-origin: center bottom;
/* 3600s完成 匀速 无限循环 */
animation: animationColor 3600s linear infinite;
}
.second{
width: 2px;
height: 70px;
background: red;
left: 50%;
top: 50%;
transform: translate(-50%,-100%);
/* 60s完成 匀速 无限循环 */
animation: animationColor 60s linear infinite;
/* 改变旋转中心 */
transform-origin: center bottom;
/* 旋转分60步完成,不能与匀速写在一起,会冲突 */
animation-timing-function: steps(60);
}
@keyframes animationColor{
0%{
/* 这部分因为在second里设置了tranform,所以必须把以前的样式带上,不然会发生覆盖 */
transform: translate(-50%,-100%) rotate(0deg);
}
100%{
transform: translate(-50%,-100%) rotate(360deg);
}
}
.center{
width: 20px;
height: 20px;
background: #ccc;
border-radius: 100%;
margin: 50% 50%;
transform: translate(-50%,-50%);
}
</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="cover"></div>
<div class="hour"></div>
<div class="minute"></div>
<div class="second"></div>
<div class="center"></div>
</div>
</body>
</html>