有时候，我们在做网站的时候，需要一个动态的旋转图片，但是又不想做成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>醉后找一张需要的背景图。放在一起，效果就实现了。
佐岸视觉，深圳专业的网站建设公司原创。
蛇口高端品牌网站开发价格其次，网站建设的售后服务也非常完善。例如，站，可以及时解决浏览器兼容性问题或...
西乡网站制作多少钱工作中包含的内容很多，关键词的选择要谨慎细致，要注意定期更换，注意对流量多做分析，...
公明手机网站制作哪个好对于多次单击页面而没有看到所需内容的用户，站。的终页面的逻辑和物理结构应遵循次...
沙井网站外包哪个公司好第二在，群聊，邮件，贴吧等地站，把的优势要充分的推销给客户。第三:搜索引擎排名，...
扫一扫 关注我们
获取官方**消息
