首页 新闻 搜索 专区 学院

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>
这个名字不辣眼的主页 这个名字不辣眼 | 初学一级 | 园豆:12
提问于:2018-03-21 17:44

让动画元素也就是.box1脱标后。另一个盒子就不动了

这个名字不辣眼 2年前
< >
分享
最佳答案
1

没理解你的意思 你是想.box1移动.box2不动吗 

奖励园豆:5
William_June | 菜鸟二级 |园豆:216 | 2018-03-22 15:18

抱歉哈没说明白。我想知道的是,在.box1没脱标之前。为什么执行.box1执行动画的时候.box2也会移动?

这个名字不辣眼 | 园豆:12 (初学一级) | 2018-03-22 16:19

@这个名字不辣眼: 这个是因为你没脱标的话 他们都是属于<body>标签里面的元素。这样的话你移动.box1是在<body>里面操作的,就会把<body>撑大, 看起来.box2就像移动了一样,实际上.box2并没有移动 。

William_June | 园豆:216 (菜鸟二级) | 2018-03-22 16:39

@William_June: 我设置的.box2属性是margin:100px auto;就算盒子变大。那它的外边距100px。没理由在垂直方向上移动,水平无变化啊。请大佬详解

这个名字不辣眼 | 园豆:12 (初学一级) | 2018-03-22 16:45

@这个名字不辣眼: 水平没变化是因为 div的默认宽度为100% 你没给定body的宽度 就相当于给body的宽度为100% 这样导致的水平没变化 如果你给定body一个宽度  box2是绝对会有变化的 

William_June | 园豆:216 (菜鸟二级) | 2018-03-22 17:11

@这个名字不辣眼: 

 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 | 园豆:216 (菜鸟二级) | 2018-03-22 17:13

@这个名字不辣眼: 还有不明白的吗 还是说要我给出效果图呢?

William_June | 园豆:216 (菜鸟二级) | 2018-03-22 17:34

@William_June: 这几天玩傻了荒废学业,才想起来qaq。此外多谢大佬的详解。您说的明白了,可以理解

这个名字不辣眼 | 园豆:12 (初学一级) | 2018-03-31 22:21

@William_June: 想给你个分,,才发现没有。那我就先不结贴了。去赚点分再结。

这个名字不辣眼 | 园豆:12 (初学一级) | 2018-03-31 22:24

@这个名字不辣眼: 没事 懂了就行

William_June | 园豆:216 (菜鸟二级) | 2018-04-02 09:42
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册