gpt4 book ai didi

html - 用 CSS 旋转行星

转载 作者:行者123 更新时间:2023-12-03 16:21:21 27 4
gpt4 key购买 nike

我有一个元素,我正在创建一些行星,它们需要旋转。我是初学者,目前在学校。我发现了一些旋转的代码,但它开始跳过。另一种方法是让它交替旋转,但这看起来不对。
如何使用 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(/image/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//

最佳答案

您需要使宽度400%而不是 200%而不是 cover使用 auto 100% .
我对代码进行了一些优化,以便您可以轻松调整尺寸并保持圆形:

.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>

也像下面一样,代码更少,没有伪元素:

.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(/image/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>

关于html - 用 CSS 旋转行星,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61689623/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com