我正在尝试创建一个围绕另一个球体旋转(轨道)的球体的纯CSS设计。就像月球绕太阳运行一样准确。地球的形象恰好适合地球。但是月球的形象并不适合月球的范围。
下面是我的CSS脚本
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
background: transparent;
}
.center .earth {
position: absolute;
top: 0;
width: 200px;
height: 200px;
background-image: url(https://www.publicdomainpictures.net/pictures/90000/velka/earth-map.jpg);
margin: 3em auto;
border-radius: 50%;
background-size: 630px;
animation: spin 30s linear alternate infinite;
box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
color: #000;``
}
.center .earth .moon {
position: absolute;
top: calc(50% - 1px);
left: 50%;
width: 200px;
height: 2px;
transform-origin: left;
border-radius: 50%;
/*animation: rotate 10s linear infinite;*/
}
.center .earth .moon::before {
content: url(moon.jpg);
position: absolute;
top: -25px;
right: 0;
width: 50px;
height: 50px;
background: #fff;
border-radius: 50%;
/*animation: rotate 10s linear infinite;*/
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spin {
100% {
background-position: 100%;
}
}
答案 0 :(得分:1)
进行此更改content: "";
到background-image: url(moon.jpg);
并从类名background: #fff
.center .earth .moon::before
body {
background: black;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border-radius: 50%;
background: transparent;
}
.center .earth {
position: absolute;
top: 0;
width: 200px;
height: 200px;
background-image: url(https://www.publicdomainpictures.net/pictures/90000/velka/earth-map.jpg);
margin: 3em auto;
border-radius: 50%;
background-size: 630px;
animation: spin 30s linear alternate infinite;
box-shadow: inset 20px 0 80px 6px rgba(0, 0, 0, 1);
color: #000;``
}
.center .earth .moon {
position: absolute;
top: calc(50% - 1px);
left: 50%;
width: 200px;
height: 2px;
transform-origin: left;
border-radius: 50%;
/*animation: rotate 10s linear infinite;*/
}
.center .earth .moon::before {
content: "";
background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRsvjrANMGI8aBJSFbsHteVa04rcB1IjjNsbrhm8vTLflfpiG133g);
position: absolute;
top: -25px;
right: 0;
width: 50px;
height: 50px;
border-radius: 50%;
/*animation: rotate 10s linear infinite;*/
}
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes spin {
100% {
background-position: 100%;
}
}

<div class="center">
<div class="earth">
<div class="moon">
</div>
</div>
</div>
&#13;