html - div的CSS变换中心

Question

我想制作一个指示器根据时钟中心旋转的动画，但我仍然遇到动画期间移动指针的问题。谁能帮帮我？

我的代码:

#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>

Answer 1

如果您对父元素使用 position: relative;，则可以在 green span 上使用 position: absolute;。

查看 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); }
}

<div class="vc_empty_space" id="counter-clock" style="height: 154px"><span class="vc_empty_space_inner"></span></div>