在网站上旋转我的徽标

时间:2016-10-28 09:43:00

标签: wordpress css3 css-animations

我有一个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); } }

请指导我。

由于

1 个答案:

答案 0 :(得分:1)

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



#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);
    }
}

<div id="logo"> hi </div>
&#13;
&#13;
&#13;