2019
10-18

用CSS写一个背景动态旋转的效果

有时候,我们在做网站的时候,需要一个动态的旋转图片,但是又不想做成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>


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


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


本文》评论

留言