个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
这是我在我的元素中使用的代码，但我希望方 block 在第一步后一起向下移动。它应该使方 block 同时下降并彼此相邻结束，但其中一个方 block 最终结束在第一个广场下方。任何解决这个问题的方法我找到了一个例子但没有任何 Action 。 http://jsfiddle.net/AndrewL32/623ftfc2/
div {
position: relative;
width: 100px;
height: 100px;
background: red;
-webkit-animation: first 5s infinite;
-webkit-animation-direction: alternate;
animation: first 5s infinite;
animation-direction: alternate;
}
@-webkit-keyframes first {
0% {
background: red;
left: 0px;
top: 0px;
}
50% {
background: green;
left: 200px;
top: 0px;
}
100% {
background: blue;
left: 200px;
top: 200px;
}
}
#2 {
position: absolute;
width: 100px;
height: 100px;
background: red;
-webkit-animation: second 5s infinite;
-webkit-animation-direction: alternate;
animation: second 5s infinite;
animation-direction: alternate;
}
@-webkit-keyframes second {
0% {
background: red;
left: 0px;
top: 0px;
}
50% {
background: green;
left: 200px;
top: 0px;
}
100% {
background: blue;
left: 200px;
top: 200px;
}
}<body>
<div><div id="2"></div></div>
</body>最佳答案
你的第二个 div 在你的第一个里面，并且由于它们的位置属性，它们是相对于彼此定位的。因此，当您为第一个 div 设置动画时，它会移动两个 div，然后当您分别为第二个 div 设置动画时，它会将它进一步向右和向下移动。
最简单的方法可能是将最后一个 top: 200px 更改为 top: 0，但您可能需要考虑使用 divs 兄弟而不是父子。
此外，id can't start with a digit ，所以我将下面的 "2" 更改为 "d2"。
div {
position: relative;
width: 100px;
height: 100px;
background: red;
-webkit-animation:first 5s infinite;
-webkit-animation-direction: alternate;
animation: first 5s infinite;
animation-direction: alternate;
}
@-webkit-keyframes first{
0% {background:red; left: 0px; top: 0px;}
50% {background:green; left: 200px; top: 0px;}
100% {background:blue; left: 200px; top: 200px;}
}
#d2 {
position:absolute;
width: 100px;
height: 100px;
background: red;
-webkit-animation:second 5s infinite;
-webkit-animation-direction: alternate;
animation: second 5s infinite;
animation-direction: alternate;
}
@-webkit-keyframes second{
0% {background:red; left: 0px; top: 0px;}
50% {background:green; left: 200px; top: 0px;}
100%{background:blue; left: 200px; top: 0;}
}<div><div id="d2"></div></div>关于css - 如何使用CSS使2个div彼此平行移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34904993/
25
4
0
这个问题在这里已经有了答案: Can I get `cabal install` to use multiple cores? (3 个回答) 关闭 7 年前。 在使用类似于 GNU make 的 -
我正在尝试通过 akeeba backup 在 parallels plesk 面板中安装一个 joomla 站点。我在哪里面临文件权限问题。 An error occured Could not o
我在 MATLAB 中使用箱线图函数。我需要为 6 个“XTicks”绘制 6 个不同数据集的箱线图，即 x 轴上的每个刻度线应包含 6 个相应的框、晶须、中线和其域内的异常值集。我尝试通过为每个变量
我需要在 Kaplan Meier 图上呈现 at_risk 数字。 最终结果应该与此类似: 我在渲染时遇到的问题是 No。处于危险中的患者数量位于图表底部。此处显示的值对应于 x 轴上的值。因此本质
我想知道你们中的任何一个人为什么知道我的表现糟透了吗？ 我正在努力实现的目标； 生成220万个文件。要创建每个文件，平均需要2-5个数据库调用。 我正在使用的服务器具有24个内核和190GB的RAM。
请帮忙。我正在研究具有此要求的算法。 给定 4 个“右”矩形(右矩形的边平行于 x 或 y)，找出它们中的任何一个覆盖的区域 例如，灰色区域被下图中的 4 个矩形中的任何一个覆盖。 enter ima
我是一名优秀的程序员,十分优秀！