1、效果展示
2、HTML结构
<body>
<!-- 创建表的容器 -->
<div class="clock">
<!-- 创建时针 -->
<div class="hour_Wraps">
<div class="hour"></div>
</div>
<!-- 创建秒 -->
<div class="min_Wraps">
<div class="min"></div>
</div>
<!-- 创建秒 -->
<div class="sec_Wraps">
<div class="sec"></div>
</div>
</div>
</body>
3、CSS样式编写
<style>
* {
margin: 0;
padding: 0;
}
/* 设置表的样式 */
.clock {
width: 500px;
height: 500px;
background-image: url(./img/1.jpg);
background-size: cover;
margin: 0 auto;
margin-top: 100px;
border-radius: 50%;
position: relative;
}
.clock>div{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
/* 设置时针 */
.hour_Wraps{
height: 70%;
width: 70%;
animation: run 43200s linear infinite;
}
.hour{
height: 50%;
width: 6px;
background-color: black;
margin: 0 auto;
}
/* 设置分针 */
.min_Wraps{
height: 80%;
width: 80%;
animation: run 3600s steps(60) infinite;
}
.min{
height: 50%;
width: 4px;
background-color: black;
margin: 0 auto;
}
/* 设置秒针 */
.sec_Wraps {
height: 90%;
width: 90%;
animation: run 60s steps(60) infinite;
}
.sec {
height: 50%;
width: 3px;
background-color: black;
margin: 0 auto;
}
/* 设置关键帧 */
@keyframes run {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}
</style>