[分享]css3指南针旋转移代码

CSS3指南针旋转移代码

/* 设置指南针图像 */
img {
    width: 50%;
    height: 50%;
}

/* 指南针旋转效果 */
.rotate {
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

/* 旋转动画效果 */
@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
    }
}
@-moz-keyframes spin {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 

以上代码实现了一个简单的指南针旋转效果。

首先，我们需要设置一个指南针的图像，可以使用img标签来实现。然后，添加一个.rotate类来实现旋转效果，使用CSS3的动画属性来实现动画效果。最后，使用关键帧来定义旋转动画的细节，实现360度的无限旋转。

你可以根据自己的需要修改图像大小、旋转速度等参数，来实现更加生动、有趣的指南针旋转效果。