Javascript 根据父元素的大小或窗口的大小更改translateX的值和元素的大小
我希望这个问题不要太具体,这样它可以涉及到其他问题 我有两个元素,一个子元素和一个父元素,子元素使用CSS动画围绕父元素旋转Javascript 根据父元素的大小或窗口的大小更改translateX的值和元素的大小,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我希望这个问题不要太具体,这样它可以涉及到其他问题 我有两个元素,一个子元素和一个父元素,子元素使用CSS动画围绕父元素旋转 <div class="planet"> <div class="moon"></div> </div> 把它想象成一颗卫星围绕着行星旋转的行星 当用户调整窗口大小时,行星的高度/宽度将调整大小,但我还需要调整卫星的高度/宽度,并且它与行星之间的距离需要降低 我在这里树立了一个榜样 这是否可能仅通过CSS实现,或者是否
<div class="planet">
<div class="moon"></div>
</div>
把它想象成一颗卫星围绕着行星旋转的行星
当用户调整窗口大小时,行星的高度/宽度将调整大小,但我还需要调整卫星的高度/宽度,并且它与行星之间的距离需要降低
我在这里树立了一个榜样
这是否可能仅通过CSS实现,或者是否需要javascript?如果需要的话,我会使用jQuery(虽然我并不擅长),但我认为纯CSS解决方案会更干净。。。也许我错了
我还应该注意到,它目前的设置方式(行星div控制着月球,这样我就可以有多个孩子(多个卫星)。但是我也认为这意味着需要不同translateX的卫星/行星有大量不同的动画…所以也许jQuery是一个更好的解决方案
如果我什么都不清楚,请告诉我
谢谢!您可以尝试使用css。您可以使用视口单位,因此所有值都将取决于视口大小
.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}
}
样本->
可能您需要添加一些媒体查询来处理不同的屏幕纵横比。当前的视口单元支持->JS将是您的解决方案。请查看原因以及如何实现这一点的一些想法。希望这些帮助!在任何地方都使用百分比?啊,谢谢,这非常好。一个问题:为什么添加了百分比z-index-to-from和to?还有没有办法将translateX从@keyframes和常规样式规则中取出?因此我可以用jqueryz控制它。索引是强制浏览器在调整大小时计算尺寸(它强制计算和绘制)。是的,你可以将translateX移动到动画之外。如果我将translateX取出,似乎会破坏动画。如果我将其放入。moon{transform:translateX(20vw);}它似乎不喜欢它。我一定是做错了什么
.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}
}