CSS3地月星系旋转效果
分类：实例代码
CSS3地月星系旋转效果属于前端实例代码，有关更多实例代码大家可以查看。
本章节分享一段代码实例，它实现了地月系旋转效果。
月球围绕地球旋转，同时地球围绕太阳旋转。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
/*css reset */
body, ol, ul, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, p, div {
margin: 0;
padding: 0;
}
body {
background: #000;
}
.wrapper {
width: 100%;
margin: 0 auto;
}
.planet {
width: 800px;
height: 600px;
margin: 100px auto;
background-color: black;
position: relative;
}
.planet div {
position: absolute;
}
.sun {
left: 350px;
top: 250px;
width: 100px;
height: 100px;
background: url(demo/CSS/img/ri.png) no-repeat;
}
.huan {
width: 740px;
height: 540px;
left: 30px;
top: 30px;
border: 1px solid #222;
border-radius: 55%;
}
.yzhou {
animation: yzhou 20s ease-in-out infinite alternate;
}
.di {
top: 0;
left: 370px;
width: 60px;
height: 60px;
transform-origin: 30px 400px;
animation: yuan 40s linear infinite;
}
.di2 {
width: 60px;
height: 60px;
background: url(demo/CSS/img/di.png) no-repeat;
position: relative;
animation: zzhuan 5s linear infinite;
}
.yue {
width: 23px;
height: 23px;
border-radius: 10px;
background: url(demo/CSS/img/yue.png) center no-repeat;
background-size: contain;
position: absolute;
top: 0;
left: 75px;
transform-origin: -46px 33px;
animation: zzhuan 4s linear infinite;
}
@keyframes yzhou {
100% {
transform: translateY(-200px);
}
}
@keyframes yuan {
100% {
transform: rotate(-360deg);
}
}
@keyframes zzhuan {
100% {
transform: rotate(-360deg);
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="planet">
<div class="huan"></div>
<div class="sun"></div>
<div class="yzhou">
<div class="di">
<div class="di2">
<div class="yue"></div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS3地月星系旋转效果，这样的场景在实际项目中还是用的比较多的，关于CSS3地月星系旋转效果就介绍到这了。