鸭子表
html代码
<div class="clock">
<div class="hour-wrapper">
<div class="hour"></div>
</div>
<div class="minute-wrapper">
<div class="minute"></div>
</div>
<div class="second-wrapper">
<div class="second"></div>
</div>
</div>
cs代码
.clock {
width: 500px;
height: 500px;
background-image: url("assets/鸭子表/clock.png");
background-image: url("assets/鸭子表/clock_duck.jpg");
background-size: cover;
margin: 100px auto;
position: relative;
}
.clock>div {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.clock>div>div {
height: 50%;
margin: 0 auto;
}
/* 时针 */
.hour-wrapper {
height: 60%;
width: 60%;
animation: clock-run 720s infinite;
}
.hour {
width: 8px;
background-color: black;
}
/* 分针 */
.minute-wrapper {
height: 75%;
width: 75%;
animation: clock-run 60s steps(60) infinite;
}
.minute {
width: 4px;
background-color: black;
}
/* 秒针 */
.second-wrapper {
height: 90%;
width: 90%;
animation: clock-run 1s steps(60) infinite;
}
.second {
width: 2px;
background-color: red;
}
@keyframes clock-run {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}