CSS
<style>
* {
padding: 0;
margin: 0;
}
/* 设置表的样式 */
.clock{
width: 500px;
height: 500px;
/* background-color: #bfa; */
margin: 0 auto;
margin-top: 100px;
border-radius: 50%;
border: 10px solid black;
position: relative;
background-image: url(./img/鸭子表.jpg);
background-size: cover;
}
.clock > div{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
/* 设置时针容器 */
.hour_wrapper{
height: 70%;
width: 70%;
/* background-color: #bfa; */
/* animation: running 43200s linear infinite; */
animation-name: running;
animation-duration: 43200s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
/* 设置时针 */
.hour{
height: 50%;
width: 6px;
background-color: #000;
margin: 0 auto;
}
/* 设置分针容器 */
.min_wrapper{
height: 80%;
width: 80%;
/* background-color: #bfa; */
/* animation: running 3600s steps(60) infinite; */
/* animation: running 3600s steps(60) none infinite normal none; */
animation-name: running;
animation-duration: 3600s;
animation-timing-function: steps(60);
animation-iteration-count: infinite;
}
/* 设置分针 */
.min{
height: 50%;
width: 4px;
background-color: #000;
margin: 0 auto;
}
/* 设置秒针容器 */
.sec_wrapper{
height: 90%;
width: 90%;
/* background-color: #bfa; */
animation-name: running;
animation-duration: 60s;
animation-timing-function: steps(60);
animation-iteration-count: infinite;
}
/* 设置秒针 */
.sec{
height: 50%;
width: 2px;
background-color: red;
margin: 0 auto;
}
/* 旋转的关键帧 */
@keyframes running {
from {
transform: rotateZ(0);
}
to {
transform: rotateZ(360deg);
}
}
</style>
body
<body>
<!-- 创建表的容器 -->
<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>
</body>
在.min_wrapper部分里,设置animation简写属性之后,该钟表的分针并未开始移动
尝试过将animation的全部属性都在简写属性钟体现出来,但依旧没有任何改变
麻烦请大家帮我看一下,我是哪个步骤出错了,这个练习我是跟着尚硅谷的鸭子表视频进行练习的,视频中,超哥的简写属性只写了name, duration和timing-function这三个值,就可以运行。所以我不知道我是那个地方没有写对
running换一个名称,如running1