使用CSS旋转行星 [英] Rotating planets with CSS
问题描述
我有一个项目,我在其中创建一些行星,它们需要旋转.我是一个正在上学的初学者.我找到了一些可旋转的代码,但它开始跳过.另一种方法是让它交替旋转,但是看起来不正确.
I have a project where I am creating some planets and they need to rotate. I am a beginner currently in school. I found some code that rotates but It starts to skip. The alternative is to have it alternate in rotating but then that doesn't look right.
如何使用CSS修复此问题?
How can I fix this with CSS?
.earth {
width: 300px;
height: 300px;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
overflow: hidden;
border-radius: 50%;
box-shadow: 0 0 20px 20px #000 inset, 0 0 20px 2px #000;
}
.earth:after {
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: -20px -20px 50px 2px #000 inset;
border-radius: 50%;
}
.earth > div {
width: 200%;
height: 100%;
animation: spin 30s linear infinite;
background: url(https://i.stack.imgur.com/3SLqF.jpg);
/*orginal image at https://upload.wikimedia.org/wikipedia/commons/thumb/c/c4/Earthmap1000x500compac.jpg/640px-Earthmap1000x500compac.jpg */
background-size: cover;
}
@keyframes spin {
to {
transform: translateX(-50%);
}
}
<div class="earth">
<div></div>
</div>
这是问题的GIF图片: https://imgur.com/a/f7nUtrW//
Here is the GIF image of the issue: https://imgur.com/a/f7nUtrW//
推荐答案
您需要将宽度设置为 400%
,而不是 200%
,而不是 cover
使用自动100%
.
You need to make the width 400%
and not 200%
and instead of cover
use auto 100%
.
我对代码进行了一些优化,因此您可以轻松调整尺寸并保持圆形:
I have optimized the code a little so you can easily adjust the dimension and keep the circular shape:
.earth {
width: 300px;
display:inline-block;
margin: 5px;
overflow: hidden;
border-radius: 50%;
box-shadow: 0 0 20px 20px #000 inset, 0 0 20px 2px #000;
position:relative;
}
.earth:after {
position: absolute;
content: "";
top: 0;
bottom: 0;
left: 0;
right: 0;
box-shadow: -20px -20px 50px 2px #000 inset;
border-radius: 50%;
}
.earth::before {
content: "";
display: block;
width: 400%;
padding-top:100%;
animation: spin 3s linear infinite;
background: url(https://github.com/BHouwens/SolarSim/blob/master/images/earthmap1k.jpg?raw=true);
background-size: auto 100%;
}
@keyframes spin {
to {
transform: translateX(-50%);
}
}
<div class="earth">
</div>
<div class="earth" style="width:200px">
</div>
<div class="earth" style="width:100px">
</div>
也像下面这样,代码更少,没有伪元素:
Also like below with less of code and no pseudo element:
.earth {
--d:300px;
width: var(--d);
height:var(--d);
display:inline-block;
margin: 5px;
border-radius: 50%;
box-shadow: -20px -20px 50px 2px #000 inset, 0 0 20px 2px #000;
background:
url(https://i.stack.imgur.com/3SLqF.jpg)
0/auto 100%;
animation: spin 3s linear infinite;
}
@keyframes spin {
to {
background-position:200% 0;
}
}
<div class="earth">
</div>
<div class="earth" style="--d:200px">
</div>
<div class="earth" style="--d:100px">
</div>
这篇关于使用CSS旋转行星的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!