css3实现元素圆周运动
2015-04-09 06:22:50
在网页的编写中，好多特效都是通过js来实现，但是还有很多通过css3实现的特效，并且这种方法实现的特效不需要引入外部文件，只需要短短几行代码即可实现，下面这段代码就是由css3来实现的元素进行圆周运动的代码：
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=2">
<style type="text/css">
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);
}
</style>
</head>
<body>
<div class="stage">
<div class="rocketship">
</div>
</div>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015-04-09，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读