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

2015-04-09 14:22:50

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

body{/*背景色*/

background:#000;

}

*{

margin:0;

padding:0;

}

.stage{

width:400px;

height:400px;

/*第一张图片居中*/

margin:100px auto;

background:url(image/1.jpg);

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

background-size:cover;

}

.rocketship{

width:30%;

height:30%;

background:url(image/4.png);

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

background-size:cover;

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

transform-origin:200% 200;

-webkit-animation:circle 5s infinite linear;

}

/*让左边框旋转*/

&＃64;-webkit-keyframes circle{

to{

-webkit-transform:rotate(1turn);

}