Question

我有一个WordPress网站：http://powersmart.tech/wordpress/

我希望我的网站徽标像这样旋转：https://www.dropbox.com/s/b2h29c8zdpfmuvi/video-1477647190.mp4?dl=0

我使用以下代码将我的徽标旋转成一圈：

#Top_bar #logo img {
 -webkit-animation:spin 4s linear infinite;
 -moz-animation:spin 4s linear infinite;
 animation:spin 4s linear infinite;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg);
transform:rotate(360deg); } }

请指导我。

由于

Answer 1

您使用了错误的转化类型，这是使用scaleX而不是rotate实现的。我做了一个小演示，它应该如何运作：

＆＃13;

#logo {
    margin: 50px;
    width: 50px;
    height: 50px;
    background-color: red;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
}

@-moz-keyframes spin {
    50% {
        -moz-transform: scaleX(0.1);
    }
}

@-webkit-keyframes spin {
    50% {
        -webkit-transform: scaleX(0.1);
    }
}

@keyframes spin {
    50% {
        -webkit-transform: scaleX(0.1));
        transform: scaleX(0.1);
    }
}

＆＃13;

<div id="logo"> hi </div>

＆＃13;

在网站上旋转我的徽标

1 个答案: