html - 围绕中心 CSS 动画运行的两个 div
问题描述
我试图围绕一个中心以圆周运动“环绕”两个单独的 div,但是我无法让这两个 div 在我的 CSS 动画中遵循相同的圆形路径。
.container {
width: 500px;
height: 500px;
display: flex;
align-items: center;
justify-content: center;
}
.box {
background-color: pink;
width: 100px;
height: 100px;
animation: battle 6s linear infinite;
position: absolute;
margin: 10px;
}
@keyframes battle {
from {
transform: rotate(0deg) translateX(150px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(150px) rotate(-360deg);
}
}
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
</div>
解决方案
让您的父元素成为指南;
当目标是围绕中心以一致的间距旋转时(而不是说更像是椭圆形图案的“椭圆轨道”),最简单的技术是让父母设置一致的边界并在其中附加孩子使用它的位置作为他们的动画路径。目标是提供单个元素同步运行的错觉,而实际上只有一个元素在旋转,默认transform-origin
的中心作为孩子在其中“运行”的指南。
在我们的例子中,我们选择了一个父母,其等长的周长大约是“所需轨道”的大小,我们给它border-radius
50% 的 a 来创建一个圆。这使得元素上的任何点都不会小于或大于另一个点。我们使它成为一个position: relative
元素,以便我们可以应用于position: absolute
它的任何子元素。在这个例子中,我们使用了伪元素,但它们也可以很容易地成为像 div 这样的附加 DOM 节点元素。
通过将我们的孩子固定到父母身上的特定点,我们创建了与父母中心的 X/Y 相等的距离,transform-origin
并应用rotate
transform
旋转父母。但是,如果我们只这样做,那么孩子们也将沿着该路径而不是保持垂直(因为假设是需要的),所以我们只需重新使用应用于父级的相同动画,但reverse
要抵消它的旋转。结果是父元素向一个方向旋转,而子元素在另一个方向旋转以创建示例中看到的效果。希望这可以帮助!
#rotator {
position: relative;
width: 7rem;
height: 7rem;
animation: rotations 6s linear infinite;
border: 1px orange dashed;
border-radius: 50%;
margin: 3rem;
}
#rotator:before, #rotator:after {
position: absolute;
content: '';
display: block;
height: 3rem;
width: 3rem;
animation: inherit;
animation-direction: reverse;
}
#rotator:before {
background-color: red;
top: -.25rem;
left: -.25rem;
}
#rotator:after {
background-color: green;
bottom: -.25rem;
right: -.25rem;
}
@keyframes rotations {
to { transform: rotate(360deg) }
}
<div id="rotator"></div>
推荐阅读
- ruby-on-rails - 通过 React Native (JWT) 向 Rails API 发送授权
- excel - 如何从未打开的工作簿中获取数据?
- java - java什么时候执行类级别的字段赋值?
- reactjs - 从父组件激活模态,子引用未定义,如何不解除状态?
- python - 使用 BeautifulSoup 登录亚马逊会导致“检测到异常登录尝试”
- sql - 如何在 SQL 中将新记录插入到现有表中?
- python - 重叠两个图时matplotlib的奇怪行为
- django - 搜索查询日期集 Django
- python - Selenium Mozilla 不接受 cookie
- python - 按唯一值对列进行排序