有时候，我们在做网站的时候，需要一个动态的旋转图片，但是又不想做成GIF格式，因为太大了。那么在网站建设中，还有什么方法来实现呢？

今天就来说一个，用CSS3的属性来做一个图片的旋转。

手先，我们先写一个DIV，并给他一个CSS样式

<div class="xuanzhuan"></div>

然后，我们来写style样式

 <style>
    .xuanzhuan {
    width: 416px;
    height: 418px;
    background-size: 416px 418px;  //设置DIV的宽，高，背景的宽高 
    background: url(bg.png) no-repeat;  //这里是要旋转的背景图片  
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    animation: roate 15s infinite linear; //这是重点，给它一个旋转的属性
}

  @keyframes roate{
	0%{ transform:rotateZ(0);-ms-transform:rotateZ(0);-moz-transform:rotateZ(0);-webkit-transform:rotateZ(0);-o-transform:rotateZ(0); }
	100%{ transform:rotateZ(360deg);-ms-transform:rotateZ(360deg);-moz-transform:rotateZ(360deg);-webkit-transform:rotateZ(360deg);-o-transform:rotateZ(360deg);}
	}
	//定义旋转效果
	
    </style>
    
	<div class="main_wai">
        </div>

醉后找一张需要的背景图。放在一起，效果就实现了。

佐岸视觉，深圳专业的网站建设公司原创。