CSS3制作简易时钟
-
创建整个时钟的容器
-
在容器内分别创建时针、分针、秒针
考虑:由于旋转时,默认旋转基点在中间,所以把时针、分针、秒针分别放在一个外层容器中,并对它们的外层容器设置动画效果。
html完整代码:
<!-- 创建表的容器 -->
<div class="clock">
<!-- 创建时针 -->
<div class="hour-wrapper">
<div class="hour"></div>
</div>
<!-- 创建分针 -->
<div class="min-wrapper">
<div class="min"></div>
</div>
<!-- 创建秒针 -->
<div class="sec-wrapper">
<div class="sec"></div>
</div>
</div>
- 设置时钟容器的基本样式
.clock{
width: 300px;
height: 300px;
margin: 0 auto;
margin-top: 100px;
border-radius: 50%;
border: 10px solid black;
position: relative;
}
- 把时针、分针、秒针设置为绝对定位并垂直水平居中显示
.clock > div{
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
- 设置时针的样式
.hour-wrapper{
width: 60%;
height: 60%;
}
.hour{
width: 6px;
height: 50%;
margin: 0 auto;
background-color: #000;
}
- 设置分针的样式
.min-wrapper{
height: 80%;
width: 80%;
}
.min{
height: 50%;
width: 4px;
background-color: #000;
margin: 0 auto;
}
- 设置秒针的样式
.sec-wrapper{
width: 95%;
height: 95%;
}
.sec{
width: 2px;
height: 50%;
background-color: red;
margin: 0 auto;
}
- 设置时针、分针、秒针运动的动画关键帧
@keyframes run{
from{
transform: rotateZ(0);
}
to{
transform: rotateZ(360deg);
}
}
- 时针走一圈需要7200s,每一步走1/12
给时针的外层容器设置:
.hour-wrapper{
animation: run 7200s steps(12) infinite;
}
- 分针走一圈需要3600s,每一步走1/60
给分针的外层容器设置:
.min-wrapper{
animation: run 3600s steps(60) infinite;
}
- 秒针走一圈需要60s,每一步走1/60
给秒针的外层容器设置:
.sec-wrapper{
animation: run 60s steps(60) infinite;
}
效果图:
css完整代码:
* {
margin: 0;
padding: 0;
}
.clock{
width: 300px;
height: 300px;
margin: 0 auto;
margin-top: 100px;
border-radius: 50%;
border: 10px solid black;
position: relative;
}
.clock > div{
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
}
/* 设置时针 */
.hour-wrapper{
width: 60%;
height: 60%;
animation: run 7200s steps(12) infinite;
}
.hour{
width: 6px;
height: 50%;
margin: 0 auto;
background-color: #000;
}
/* 设置分针 */
.min-wrapper{
height: 80%;
width: 80%;
animation: run 3600s steps(60) infinite;
}
.min{
height: 50%;
width: 4px;
background-color: #000;
margin: 0 auto;
}
/* 设置秒针 */
.sec-wrapper{
width: 95%;
height: 95%;
animation: run 60s steps(60) infinite;
}
.sec{
width: 2px;
height: 50%;
background-color: red;
margin: 0 auto;
}
/* 旋转的关键帧 */
@keyframes run{
from{
transform: rotateZ(0);
}
to{
transform: rotateZ(360deg);
}
}