html5 css3做圆周运动,css3实现元素圆周运动

2015-04-09 14:22:50

在网页的编写中，好多特效都是通过js来实现，但是还有很多通过css3实现的特效，并且这种方法实现的特效不需要引入外部文件，只需要短短几行代码即可实现，下面这段代码就是由css3来实现的元素进行圆周运动的代码：

body{/*背景色*/

background:#000;

}

*{

margin:0;

padding:0;

}

.stage{

width:400px;

height:400px;

/*第一张图片居中*/

margin:100px auto;

background:url(image/1.jpg);

/*将背景图缩放 保留原有比例 即：不管背景图像大于还是小于背景区域，都会覆盖背景区域,*/

background-size:cover;

}

.rocketship{

width:30%;

height:30%;

background:url(image/4.png);

/*将背景图缩放 保留原有比例 即：不管背景图像大于还是小于背景区域，都会覆盖背景区域,*/

background-size:cover;

/*设置旋转原点中心*/

transform-origin:200% 200;

-webkit-animation:circle 5s infinite linear;

}

/*让左边框旋转*/

@-webkit-keyframes circle{

to{

-webkit-transform:rotate(1turn);

}

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！