189 8069 5689
这篇文章主要介绍了怎么用纯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实现太阳和地球和月亮的运转模型动画”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!