根据父元素的大小或窗口的大小更改 translateX 的值和元素的大小
Change value of translateX and size of element based on size of parent element OR size of window
我希望这个问题不要太具体,所以它可以与其他问题联系起来......
我有两个元素,一个子元素和一个父元素,子元素使用 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持有月球,以便我可以有多个孩子(多个卫星(。然而,我也认为这意味着为需要不同翻译X的卫星/行星提供大量不同的动画......所以也许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}
}
样品 ->在这里
您可能需要添加一些媒体查询来处理不同的屏幕纵横比。当前视口单元支持 -> caniuse.com
相关文章:
- CKEditor Widget-阻止编辑可编辑元素本身
- 如何设置html元素填充的动画
- 如何将HTML id分配给元素,以及如何将JavaScript应用于元素
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 使用clickToggle并在单击另一个元素时关闭元素
- 单击时将焦点更改为元素
- 表追加而不附加最后一个元素
- 如何在jQuery中获取元素的形式
- 我可以获得相对于被点击元素的确切点击位置吗
- 在函数中添加数组元素的数值
- 在单击任何位置时隐藏元素,而不检查每次DOM单击
- 将视口底部滚动到元素底部
- 是否有任何snippet或jQuery插件可以列出easylist.txt模式匹配的DOM中的所有元素
- 在不使用JQuery的情况下隐藏DOM中的选定元素
- 如何使用jquery处理php循环通过元素
- Ckeditor-plugin:插入虚假元素add不情愿<p>标签前后
- JQuery添加元素需要在我的js之前再次添加JQuery脚本
- 在Jquery detachment()和appendTo()之后定位元素
- 根据父元素的大小或窗口的大小更改 translateX 的值和元素的大小
- Javascript+CSS:从绝对定位的元素转换为CSS转换(左、上、宽、高到translateX、translate