javascript - 根据父元素的大小或窗口的大小更改 translateX 的值和元素的大小

Question

我希望这个问题不要太具体，这样它就可以与其他问题相关...

我有两个元素，一个子元素和一个父元素，子元素使用 CSS 动画围绕父元素旋转。

<div class="planet">

<div class="moon"></div>

</div>

月亮动画设置为使月亮在同一位置加载到行星顶部，但使用 translateX 推出然后旋转，如下所示:

@keyframes myOrbit {
from { transform: rotate(0deg) translateX(200px) rotate(0deg); }
to   { transform: rotate(360deg) translateX(200px) rotate(-360deg); }
}

把它想象成一个行星，月亮绕着行星旋转。

当用户调整窗口大小时，行星的高度/宽度也会调整，但我还需要调整卫星的高度/宽度，并且它与行星之间的距离需要降低。

我在这里设置了一个示例... https://codepen.io/anon/pen/mVvYbR

这是否可以仅使用 CSS 来实现，还是需要 javascript？如果需要，我会使用 jQuery，(虽然我不是很擅长)但我认为纯 CSS 解决方案会更简洁......也许我在那个问题上错了。

我还应该注意它目前的设置方式(行星 div 持有月亮，这样我就可以拥有多个 child (多个卫星)。但是我也认为这意味着拥有大量的需要不同 translateX 的卫星/行星的不同动画...所以也许 jQuery 是一个更好的解决方案...

如果我不清楚任何事情，请告诉我。

谢谢!

Answer 1

您可以尝试仅使用 css 来实现。您可以使用视口(viewport)单位，因此所有值都将取决于视口(viewport)大小。

.planet {
    width: 10vw;
    height: 10vw;
      background: url(http://placehold.it/940x940) no-repeat center center;
    background-size: contain;
    z-index: 1;
}

.moon {
    position: absolute;
    background: url(http://placehold.it/140x140) no-repeat center center;
    background-size: contain;
    width: 5vw;
    height: 5vw;
    -webkit-animation: myOrbit 20s linear infinite;
       -moz-animation: myOrbit 20s linear infinite;
         -o-animation: myOrbit 20s linear infinite;
            animation: myOrbit 20s linear infinite;
}

@keyframes myOrbit {
    from { transform: rotate(0deg) translateX(20vw) rotate(0deg); z-index:1}
    to   { transform: rotate(360deg) translateX(20vw) rotate(-360deg); z-index:2}
}

样本 -> here

您可能需要添加一些媒体查询来处理不同的屏幕纵横比。当前视口(viewport)单位支持 -> caniuse.com