怎么用纯CSS实现太阳和地球和月亮的运转模型动画
这篇文章主要介绍了怎么用纯CSS实现太阳和地球和月亮的运转模型动画，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
代码解读
定义dom，容器中包含3个元素：
居中显示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:black;
}
定义容器尺寸：
.container{
font-size:10px;
width:40em;
height:40em;
position:relative;
}
画出太阳：
.sun{
position:absolute;
top:15em;
left:15em;
width:10em;
height:10em;
background-color:yellow;
border-radius:50%;
box-shadow:003emwhite;
}
画出地球和月球的轨迹：
.earth,
.moon{
position:absolute;
border-style:solid;
border-color:whitetransparenttransparenttransparent;
border-width:0.1em0.1em00;
border-radius:50%;
}
.earth{
top:5em;
left:5em;
width:30em;
height:30em;
}
.moon{
top:0;
right:0;
width:8em;
height:8em;
}
用伪元素画出地球和月球：
.earth::before,
.moon::before{
position:absolute;
border-radius:50%;
content:'';
}
.earth::before{
top:2.8em;
right:2.5em;
height:3em;
width:3em;
background-color:aqua;
}
.moon::before{
top:0.8em;
right:0.2em;
width:1.2em;
height:1.2em;
background-color:silver;
}
设置运转动画效果：
/*rotationperiod365.2422days*/
.earth{
animation:orbit36.5slinearinfinite;
}
/*rotationperiod27.322days*/
.moon{
animation:orbit2.7slinearinfinite;
}
@keyframesorbit{
to{
transform:rotate(360deg);
}
}
最后，隐藏可能会出现在容器外的部分：
body{
overflow:hidden;
}
感谢你能够认真阅读完这篇文章，希望小编分享的"怎么用纯CSS实现太阳和地球和月亮的运转模型动画"这篇文章对大家有帮助，同时也希望大家多多支持，关注行业资讯频道，更多相关知识等着你来学习!
