Question

我使用CSS3关键帧使图像圈运行而不移动，我的意思就像一个轮子但是圆圈没有移动，它保持原样。

这是我的CSS代码：

.step_7 { 
background: url(../images/step7.png) no-repeat center top, url(../images/outer_glow.png) no-repeat 0 -7px; 
top: 377px;
left: 417px;
width:102px;
height: 104px;
z-index: 4;
}
@-webkit-keyframes circle-run 
{
    0%{
        -webkit-transform:rotate(0deg);
    }
    100% 
    {
        -webkit-transform:rotate(360deg);
    }
}

.animation {
    -webkit-animation: circle-run 2s infinite;
    -webkit-animation-timing-function:linear;
}

Javascipt：

 $('.btn1_inv').click(function () {
        $('.step_7').addClass('animation');
    });

这是我的示例代码： http://jsfiddle.net/vLwDc/25/

从上面这些代码中，我的元素运行但它移动了一下，我该如何解决？提前谢谢。

Answer 1

你的意思是为什么它摇摇晃晃？如果是这样，它的宽度高度不同，所以它就像那样，因为它不是一个完美的圆圈

CSS3关键帧如何使图像圈运行而不移动

1 个答案: