H5的动画学习，在动画垂直移动时，会影响其他的元素也会上下移动
0
[已解决问题]
解决于 2018-09-07 11:36
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>动画练习2</title> 6 <style> 7 body{ 8 border: 1px solid #000; 9 } 10 *{ 11 margin:0; 12 padding:0; 13 } 14 .box1{ 15 width: 50px; 16 height:50px; 17 background-color: black; 18 animation: move 3s linear 2s 5 alternate; 19 //display: inline-block; 20 } 21 @keyframes move { 22 0%{ 23 margin-left:0; 24 25 } 26 25%{ 27 margin-left:300px; 28 margin-top:0px; 29 background-color: red; 30 } 31 50%{ 32 margin-left: 300px; 33 margin-top: 300px; 34 background-color: gold; 35 } 36 75%{ 37 margin-left:0; 38 margin-top: 300px; 39 background-color: green; 40 } 41 100%{ 42 eft:0; margin-l 43 margin-top:0; 44 /*这里需要注意的是这个前面百分比的数字，也代表着对应的执行动画在，动画执行总时间中的占比。*/ 45 } 46 47 } 48 .box2{ 49 width: 200px; 50 height: 200px; 51 background-color: pink; 52 margin:0 auto; 53 /*animation-name: Romate;*/ 54 /*animation-duration: 4s;*/ 55 /*animation-delay: 2s;*/ 56 /*!*动画名称 动画时长 速度 延迟 次数 是否有返回动画 *!*/ 57 /*animation-fill-mode:backwards ;*/ 58 } 59 60 61 62 </style> 63 </head> 64 <body> 65 <div class="box1"></div> 66 <div class="box2"> 67 <!--<li>1</li>--> 68 <!--<li>2</li>--> 69 <!--<li>3</li>--> 70 <!--<li>4</li>--> 71 </div> 72 73 </body> 74 </html>
最佳答案
1
没理解你的意思 你是想.box1移动.box2不动吗
奖励园豆：5
抱歉哈没说明白。我想知道的是，在.box1没脱标之前。为什么执行.box1执行动画的时候.box2也会移动？
@这个名字不辣眼: 这个是因为你没脱标的话 他们都是属于<body>标签里面的元素。这样的话你移动.box1是在<body>里面操作的，就会把<body>撑大， 看起来.box2就像移动了一样，实际上.box2并没有移动 。
@William_June: 我设置的.box2属性是margin：100px auto；就算盒子变大。那它的外边距100px。没理由在垂直方向上移动，水平无变化啊。请大佬详解
@这个名字不辣眼: 水平没变化是因为 div的默认宽度为100% 你没给定body的宽度 就相当于给body的宽度为100% 这样导致的水平没变化 如果你给定body一个宽度 box2是绝对会有变化的
@这个名字不辣眼:
body{
border: 1px solid #000;
width: 800px;
}
*{
margin:0;
padding:0;
}
.box1{
width: 50px;
height:50px;
background-color: black;
/*animation: move 3s linear 2s 5 alternate;*/
/*display: inline-block;*/
margin-left: 300px;
margin-top: 300px;
}
.box2{
width: 200px;
height: 200px;
background-color: pink;
margin:0 auto;
/*animation-name: Romate;*/
/*animation-duration: 4s;*/
/*animation-delay: 2s;*/
/*!*动画名称 动画时长 速度 延迟 次数 是否有返回动画 *!*/
/*animation-fill-mode:backwards ;*/
}
你按我这样设定一下 就可以看出来了
@这个名字不辣眼: 还有不明白的吗 还是说要我给出效果图呢？
@William_June: 这几天玩傻了荒废学业，才想起来qaq。此外多谢大佬的详解。您说的明白了，可以理解
@William_June: 想给你个分，，才发现没有。那我就先不结贴了。去赚点分再结。
@这个名字不辣眼: 没事 懂了就行
让动画元素也就是.box1脱标后。另一个盒子就不动了
– 这个名字不辣眼 6年前