[分享]css3图片成环形旋转

CSS3是一种强大的样式表语言，可以使我们的网页更加美观和生动。而其中一个应用就是使图片成为环形旋转的形式，下面我们来看看如何实现这个效果。/ 首先我们将图片设置为圆形并居中 / img { disp...

CSS3是一种强大的样式表语言，可以使我们的网页更加美观和生动。而其中一个应用就是使图片成为环形旋转的形式，下面我们来看看如何实现这个效果。

/* 首先我们将图片设置为圆形并居中 */
img {
    display: block;
    margin: 0 auto;
    border-radius: 50%;
}

/* 接着就是使用CSS3的动画效果让图片旋转 */
img {
    animation: rotate 10s linear infinite;
}

/* 定义动画 */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 最后就是设置图片的宽度和高度了 */
img {
    width: 200px;
    height: 200px;
} 

通过上面的CSS代码，我们可以将一个图片设置为环形旋转的形式。不过需要注意的是，这里的图片是正方形，如果使用矩形图片则会出现变形的情况，所以最好使用正方形图片。