Question

我一直在尝试在图片上使用CSS动画中的margin-right。使用margin-left的另一个工作正常。 width:100%处的display:block和container生成相同的结果。尝试将它们嵌套在单独的div中，但是没有工作。它可能与在DOM中放置HTML元素有关，但我目前不知道可能导致它的原因。

两张图像都应向相反方向滑动，并像门一样打开。

这是代码：

#container {
    width: block;
    height: 100vh;
}

#door-left {
    margin-top: -3vh; 
   position: relative;
    z-index: 9999;
    width: 50%;
    height: 100vh;
    -webkit-animation: left 4s ease 1 forwards;
    -moz-animation: left 4s ease 1 forwards;
    -o-animation: left 4s ease 1 forwards;
    animation: left 4s ease 1 forwards;
 
}

#door-right {  
    margin-top: -3vh; 
   position: relative;
    z-index: 9999;
    width: 50%;
    height: 100vh;
    -webkit-animation: right 4s ease 1 forwards;
    -moz-animation: right 4s ease 1 forwards;
    -o-animation: right 4s ease 1 forwards;
    animation: right 4s ease 1 forwards;
}


@-webkit-keyframes left {
    from {
        margin-left: 0;
    }
    to {
        margin-left: -80vw;
    }
 } 

@-moz-keyframes left {
    from {
        margin-left: 0;
    }
    to {
        margin-left: -80vw;
    }
 } 

 @-o-keyframes left {
    from {
        margin-left: 0;
    }
    to {
        margin-left: -80vw;
    }
 }

@keyframes left {
   from {
       margin-left: 0;
   }
   to {
       margin-left: -80vw;
   }
}

@-webkit-keyframes right {
    from {
        margin-right: 0;
    }
    to {
        margin-right: -80vw;
    }
}

@-moz-keyframes right {
    from {
        margin-right: 0;
    }
    to {
        margin-right: -80vw;
    }
}

@-o-keyframes right {
    from {
        margin-right: 0;
    }
    to {
        margin-right: -80vw;
    }
}

@keyframes right {
    from {
        margin-right: 0;
    }
    to {
        margin-right: -80vw;
    }
 }

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="main.css"/>
</head>
<body>
    <div id="container">
    <img src="https://i.imgur.com/Q6OvLlG.jpg" id="door-left"/><img src="https://i.imgur.com/ysAVVGd.jpg" id="door-right"/>
</div>

</body>

</html>

不适用于Chrome和Firefox。所以不太可能是兼容性问题。

Answer 1

这是合乎逻辑的，因为如果您为第一张图片设置了一个负margin-left，则会将其拉到后面的所有内容（包括第二张图片）。< / p>

通过将负margin-right设置为第二张图像，您将无法获得预期的效果，它还会拉动重叠后的所有内容图像。

以下是一个示例，以便您更好地了解正在发生的事情：

＆＃13;

.block {
  padding:0 50px;
  font-size:0;
}
.block > div {
  display:inline-block;
  height:100px;
  width:100px;
}
.left {
  border:1px solid blue;
}
.right {
  border:1px solid orange;
}
.after {
  border:1px solid black;
}

＆＃13;

before margin
<div class="block">
  <div class="left"></div>
  <div class="right"></div>
  <div class="after"></div>
</div>
after margin
<div class="block">
  <div class="left" style="margin-left:-50px"></div>
  <div class="right" style="margin-right:-50px"></div>
  <div class="after"></div>
</div>

＆＃13;

在您的情况下，更好地考虑左右属性，您将完全具备所需的内容：

＆＃13;

body {
  margin: 0
}

#container {
  display: block;
  height: 100vh;
  font-size: 0;
  position: relative;
  overflow: hidden;
}

#door-left {
  position: relative;
  z-index: 9999;
  width: 50%;
  height: 100vh;
  animation: left 4s ease 1 forwards;
}

#door-right {
  position: relative;
  z-index: 9999;
  width: 50%;
  height: 100vh;
  animation: right 4s ease 1 forwards;
}

@keyframes left {
  from {
    left: 0;
  }
  to {
    left: -80vw;
  }
}

@keyframes right {
  from {
    right: 0;
  }
  to {
    right: -80vw;
  }
}

＆＃13;

<div id="container">
  <img src="https://i.imgur.com/Q6OvLlG.jpg" id="door-left">
  <img src="https://i.imgur.com/ysAVVGd.jpg" id="door-right">
</div>

＆＃13;

margin-right不适用于图像

1 个答案: