我想制作一个动画,指针根据时钟的中心旋转,但在动画过程中我仍然遇到移动指针的问题。任何人都可以帮助我吗?
我的代码:
#counter-clock {
background: url(http://bluesolution.e-kei.pl/wp-content/uploads/2017/12/clock.png);
background-size: cover;
width: 154px;
height: 154px;
animation: 1s ease-out 0s 1 rotate;
}
#counter-clock span{
background: green;
width: 11px;
height: 65px;
margin: 20px auto;
transition: transform 1s linear;
transform-origin: bottom center;
transform-style: preserve-3D;
transform: rotate(221deg);
display: block;
animation: test 2s 1s linear forwards;
}
@-webkit-keyframes test {
0% {transform: rotate(221deg);; }
100% { transform: rotate(380deg); }
}
<div class="vc_empty_space" id="counter-clock" style="height: 154px"><span class="vc_empty_space_inner"></span></div>
答案 0 :(得分:1)
如果您使用position: absolute;
父元素,则可以green span
使用position: relative;
。
查看CSS中的评论
#counter-clock {
position: relative; /* add this line */
background: url(http://bluesolution.e-kei.pl/wp-content/uploads/2017/12/clock.png);
background-size: cover;
width: 154px;
height: 154px;
animation: 1s ease-out 0s 1 rotate;
}
#counter-clock span{
position:absolute; /* add this line */
left:0; right:0; /* add this line */
top:-5px; bottom:-5px; /* add this line */
background: green;
width: 11px;
height: 65px;
margin: 20px auto;
transition: transform 1s linear;
transform-origin: bottom center;
transform-style: preserve-3D;
transform: rotate(221deg);
display: block;
animation: test 2s 1s linear forwards;
}
@-webkit-keyframes test {
0% {transform: rotate(221deg);; }
100% { transform: rotate(380deg); }
}
&#13;
<div class="vc_empty_space" id="counter-clock" style="height: 154px"><span class="vc_empty_space_inner"></span></div>
&#13;