使用CSS旋转行星

pprl5pva 于 2023-02-06 发布在其他

关注(0)|答案(3)|浏览(138)

我有一个项目，我正在创造一些行星，他们需要旋转。我是一个初学者目前在学校。我发现一些代码，旋转，但它开始跳过。替代方案是让它交替旋转，但然后看起来不正确。
我如何用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//

css

来源：https://stackoverflow.com/questions/61689623/rotating-planets-with-css

3条答案

按热度按时间

jgovgodb1#

您需要使宽度为400%而不是200%，并使用auto 100%代替cover。
我对代码进行了一些优化，这样您就可以轻松地调整尺寸并保持圆形：

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

也像下面的代码少，没有伪元素：
一个二个一个一个

赞(0）回复(0）举报 2023-02-06

ndasle7k2#

可以向关键帧添加两个指定x位置的阶段，如下所示：

@keyframes spin{
  0% { background-position-x: 0; } 
  100% { background-position-x: -600px; }
}

我添加了一个代码片段，结果如下：
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-02-06

kr98yfug3#

你可以看到我的尝试here，和accompanying article！这里是哈巴狗（sass是数百行）

- const randomNumber = ({ min, max }) => Math.floor(Math.random() * (max - min + 1)) + min;
- const planetDiameter = 50;
- const cloudLayers = 3;
- const earth = [{"label": "Africa", "layers": 20, "diameter": 26 * (50 / 42), "rotation": -8, "z-rotation": 14, "position": 10, "components": 1},{"label": "Asia", "layers": 20, "diameter": 38 * (50 / 42), "rotation": -4, "z-rotation": -45, "position": 1919, "components": 7},{"label": "Europe", "layers": 20, "diameter": 21 * (50/42), "rotation": 0, "z-rotation": 10, "position": 520, "components": 8},{"label": "America", "layers": 20, "diameter": 41 * (50/42), "rotation": 20, "z-rotation": 140, "position": 560, "components": 4},{"label": "Australasia", "layers": 20, "diameter": 24 * (50 / 42), "rotation": -10, "z-rotation": -89, "position": 1, "components": 24}];
- const clouds = [{"label": "A", "randomY": randomNumber({min: 0, max: 36}) * 10, "randomZ": randomNumber({min: -50, max: 50}), "center-to-apex": -95, "width": "632.15px", "height": "271.38px"}, {"label": "B", "randomY": randomNumber({min: 0, max: 36}) * 10, "randomZ": randomNumber({min: -50, max: 50}), "center-to-apex": 0, "width": "762.01px", "height": "301.12px"}, { "label": "C","randomY": randomNumber({min: 0, max: 36}) * 10, "randomZ": randomNumber({min: -50, max: 50}), "center-to-apex": 0, "width": "737.64px", "height": "409.58px"}, {"label": "D", "randomY": randomNumber({min: 0, max: 36}) * 10, "randomZ": randomNumber({min: -50, max: 50}), "center-to-apex": 0, "width": "778.11px", "height": "406.46px"}, {"label": "E", "randomY": randomNumber({min: 0, max: 36}) * 10, "randomZ": randomNumber({min: -50, max: 50}), "center-to-apex": 130, "width": "750.41px", "height": "391.78px"}];
- const cloudsComputed = Array(randomNumber({ min: 10, max: 20 })).fill("").map(() => { const randomZ = randomNumber({ min: -50, max: 50 }); const randomY = randomNumber({ min: 0, max: 36 }) * 10; const randomCloud = clouds[randomNumber({ min: 0, max: clouds.length - 1 })].label; const randomScale = randomNumber({ min: 21, max: 30 }); return { randomZ, randomY, randomCloud, randomScale };});

.Earth
.Earth__Earth-Container
 .Planet.Planet--Earth
   .Sphere
     .Hemisphere
       each continent in earth
         div(class=`Island Island--${continent.label}`)
           - var layers = continent.layers - 1;
           while layers > 0
             - layers--
             .Plate
               div
                 - var components = continent.components;
                 while components > 0
                   - components--
                     .Land

.Earth__Clouds
 each cloud in cloudsComputed
   div(class=`Planet Planet--Clouds Planet--Clouds--y-rotation--${cloud.randomY}`)
     .Sphere
       div(class="Hemisphere" style={"transform": `rotateY(${cloud.randomY}deg) rotateZ(${cloud.randomZ}deg)`})
         div(class=`Island Cloud Cloud--${cloud.randomCloud} Cloud--scale-${cloud.randomScale}`)
           - var layers = cloudLayers;
           while layers > 0
             - layers--
               div

赞(0）回复(0）举报 2023-02-06

我来回答

使用CSS旋转行星

3条答案

相关问题

热门标签

最新问答