Question

我正在尝试更改此CSS动画以使用vh而不是width％。基本上我需要它从中间向上和向下水平显示，而不是向左和向右。

尝试了很多不同的方法来破译解决方案，但是执行以下操作（见下文）并没有做任何事情。

@keyframes curtain
0%, 50%
    height: 50vh
100%
    width: 0

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
 body {
  font-family: "Open Sans", Helvetica, Verdana, sans-serif;
  margin: 0;
}
h1 {
  font-size: 36px;
}
#intro {
  margin: 0 auto;
  max-width: 1170px;
  height: 100vh;
  text-align: center;
  overflow: hidden;
}
#intro::before,
#intro::after {
  -webkit-animation: curtain 2s;
  -moz-animation: curtain 2s;
  -o-animation: curtain 2s;
  animation: curtain 2s;
  background-color: #152a33;
  bottom: 0;
  content: "";
  position: absolute;
  top: 0;
}
#intro::before {
  left: 0;
}
#intro::after {
  right: 0;
}
.table {
  display: table;
  height: 100%;
  width: 100%;
}
.table .cell {
  display: table-cell;
  height: 100%;
  width: 100%;
  vertical-align: middle;
}
@-webkit-keyframes curtain {
  0%, 50% {
    width: 50%;
  }
  100% {
    width: 0;
  }
}
@-moz-keyframes curtain {
  0%, 50% {
    width: 50%;
  }
  100% {
    width: 0;
  }
}
@-o-keyframes curtain {
  0%, 50% {
    width: 50%;
  }
  100% {
    width: 0;
  }
}
@keyframes curtain {
  0%, 50% {
    width: 50%;
  }
  100% {
    width: 0;
  }
}

<section id="intro">
  <div class="table">
    <div class="cell">
      <h1>Hello world</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, beatae eius veritatis voluptate ab minus deserunt aliquam saepe, error maiores pariatur nam illo natus dolorem veniam, doloremque, expedita officiis esse.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, natus? Non aperiam eaque neque vero perspiciatis, reprehenderit eveniet quae ut omnis voluptatem architecto maxime cum quaerat dignissimos porro. Provident, magnam!</p>
    </div>
  </div>
</section>

有人请求解决方案吗？谢谢！

Answer 1

只需在正常状态和关键帧内更改伪元素的定位属性height和width。您似乎只在关键帧中进行了更改，因此无法正常工作。

在原始演示中，伪元素都有bottom: 0和top: 0，这意味着它获得了父元素的完整高度（100vh）。 :before相对于父级的左边缘定位，而:after相对于右边缘定位。在动画期间，两者都获得50%宽度，从而产生向左和向右的幕布移动效果。

对于顶部和底部的窗帘移动效果，伪元素需要取其父级的100%宽度，并分别相对于顶部和底部边缘定位（left:0可以应用因为两者都应分别位于左上角和左下角。

&::before, &::after
    animation: curtain 2s
    background-color: #152a33
    content: ''
    left: 0
    position: absolute

&::before
    top: 0
    width: 100%

&::after
    bottom: 0
    width: 100%

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
 body {
  font-family: "Open Sans", Helvetica, Verdana, sans-serif;
  margin: 0;
}
h1 {
  font-size: 36px;
}
#intro {
  margin: 0 auto;
  max-width: 1170px;
  height: 100vh;
  text-align: center;
  overflow: hidden;
}
#intro::before,
#intro::after {
  -webkit-animation: curtain 2s;
  -moz-animation: curtain 2s;
  -o-animation: curtain 2s;
  animation: curtain 2s;
  background-color: #152a33;
  content: "";
  left: 0;
  position: absolute;
}
#intro::before {
  top: 0;
  width: 100%;
}
#intro::after {
  bottom: 0;
  width: 100%;
}
.table {
  display: table;
  height: 100%;
  width: 100%;
}
.table .cell {
  display: table-cell;
  height: 100%;
  width: 100%;
  vertical-align: middle;
}
@-webkit-keyframes curtain {
  0%, 50% {
    height: 50vh;
  }
  100% {
    height: 0;
  }
}
@-moz-keyframes curtain {
  0%, 50% {
    height: 50vh;
  }
  100% {
    height: 0;
  }
}
@-o-keyframes curtain {
  0%, 50% {
    height: 50vh;
  }
  100% {
    height: 0;
  }
}
@keyframes curtain {
  0%, 50% {
    height: 50vh;
  }
  100% {
    height: 0;
  }
}

<section id="intro">
  <div class="table">
    <div class="cell">
      <h1>Hello world</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, beatae eius veritatis voluptate ab minus deserunt aliquam saepe, error maiores pariatur nam illo natus dolorem veniam, doloremque, expedita officiis esse.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, natus? Non aperiam eaque neque vero perspiciatis, reprehenderit eveniet quae ut omnis voluptatem architecto maxime cum quaerat dignissimos porro. Provident, magnam!</p>
    </div>
  </div>
</section>

Answer 2

它是关于伪元素之前和之后的顶部和底部，因为你从头开始全高度。如果您将代码更改为：

&::before, &::after
    -webkit-animation: curtain 2s
    -moz-animation: curtain 2s
    -o-animation: curtain 2s
    animation: curtain 2s
    background-color: #152a33
    right: 0 <!-- The change -->
    content: ''
    position: absolute
    left: 0 <!-- The change -->

也可以在顶部和底部左右改变：

&::before
    top: 0

&::after
    bottom: 0

最后在关键帧中更改宽度和高度，您将看到所需的结果：

@keyframes幕布 0％，50％身高：50％ 100％身高：0

所以完整的代码就像这样：

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,600);
body {
  font-family: "Open Sans", Helvetica, Verdana, sans-serif;
  margin: 0;
}

h1 {
  font-size: 36px;
}

#intro {
  margin: 0 auto;
  max-width: 1170px;
  height: 100vh;
  text-align: center;
  overflow: hidden;
}
#intro::before, #intro::after {
  -webkit-animation: curtain 2s;
  -moz-animation: curtain 2s;
  -o-animation: curtain 2s;
  animation: curtain 2s;
  background-color: #152a33;
  right: 0;
  content: "";
  position: absolute;
  left: 0;
}
#intro::before {
  top: 0;
}
#intro::after {
  bottom: 0;
}

.table {
  display: table;
  height: 100%;
  width: 100%;
}
.table .cell {
  display: table-cell;
  height: 100%;
  width: 100%;
  vertical-align: middle;
}

@-webkit-keyframes curtain {
  0%, 50% {
    height: 50%;
  }
  100% {
    height: 0;
  }
}
@-moz-keyframes curtain {
  0%, 50% {
    height: 50%;
  }
  100% {
    height: 0;
  }
}
@-o-keyframes curtain {
  0%, 50% {
    height: 50%;
  }
  100% {
    height: 0;
  }
}
@keyframes curtain {
  0%, 50% {
    height: 50%;
  }
  100% {
    height: 0;
  }
}

<section id="intro">
  <div class="table">
    <div class="cell">
      <h1>Hello world</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, beatae eius veritatis voluptate ab minus deserunt aliquam saepe, error maiores pariatur nam illo natus dolorem veniam, doloremque, expedita officiis esse.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, natus? Non aperiam eaque neque vero perspiciatis, reprehenderit eveniet quae ut omnis voluptatem architecto maxime cum quaerat dignissimos porro. Provident, magnam!</p>
    </div>
  </div>
</section>

改变CSS关键帧以从中间水平显示而不是垂直显示

2 个答案: