嘿伙计们，

Question

嘿伙计们，

所以我在下面有2个代码片段。在第一个，我有美丽的条纹，他们调整自己的窗口大小，并始终居中（我尝试一些动画，但我不喜欢它像片段2中的动画）

但是我需要一个动画，这个动画显示在第二个片段中，条纹应该来自下方并且上升，我想在最终结果中保留它。

所以我需要与第一个和第二个片段融合。

首先：

 html, body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        #position: fixed;
      }

      .mask {
        height: 100%;
        overflow: hidden;
        position: relative;
      }

      .container {
        height: 100%;
        margin: 0 -100vh;
        #position: absolute;
      }

      .stripe {
        float: left;
        height: 100%;
        width: 2%;
        margin: 0 1%;
        bottom: 0%;
        max-height: 0%;
        #position: absolute;
        background-color: black;
        transform: skew(-20deg);

        #transform-origin: bottom bottom;
       #transform-origin: left bottom;


        animation: ani 1s linear 1 forwards;
      }



      .stripe:nth-child(1) {
        animation-delay: 0.0s;
      }

      .stripe:nth-child(2) {
        animation-delay: 0.2s;
      }

      .stripe:nth-child(3) {
      animation-delay: 0.4s;
      }

      .stripe:nth-child(4) {
        animation-delay: 0.6s;
      }

      .stripe:nth-child(5) {
        animation-delay: 0.8s;
      }

      .stripe:nth-child(6) {
        animation-delay: 1s;
      }

      .stripe:nth-child(7) {
        animation-delay: 1.2s;
      }

      .stripe:nth-child(8) {
        animation-delay: 1.4s;
      }

      .stripe:nth-child(9) {
        animation-delay: 1.6s;
      }

      .stripe:nth-child(10) {
        animation-delay: 1.8s;
      }

      .stripe:nth-child(11) {
        animation-delay: 2s;
      }

      .stripe:nth-child(12) {
        animation-delay: 2.2s;
      }

      .stripe:nth-child(13) {
        animation-delay: 2.4s;
      }

      .stripe:nth-child(14) {
        animation-delay: 2.6s;
      }

      .stripe:nth-child(15) {
        animation-delay: 2.8s;
      }

      .stripe:nth-child(16) {
        animation-delay: 3s;
      }

      .stripe:nth-child(17) {
        animation-delay: 3.2s;
      }

      .stripe:nth-child(18) {
        animation-delay: 3.4s;
      }

      .stripe:nth-child(19) {
        animation-delay: 3.6s;
      }

      .stripe:nth-child(20) {
        animation-delay: 3.8s;
      }

      .stripe:nth-child(21) {
      animation-delay: 4s;
      }

      .stripe:nth-child(22) {
        animation-delay: 4.2s;
      }

      .stripe:nth-child(23) {
        animation-delay: 4.4s;
      }

      .stripe:nth-child(24) {
        animation-delay: 4.6s;
      }

      .stripe:nth-child(25) {
        animation-delay: 4.8s;
      }



      @keyframes ani {
        0% {
          max-height: 0%;
        }
        100% {
          max-height: 100%;
        }
      }

<!DOCTYPE html>
<html>
  <head>
  </head>
  
  <body>
    <div class="mask">
      <div class="container">
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
        <div class="stripe"></div>
      </div>
    </div>
  </body>
</html>

第二

 html, body {

        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        position: fixed;
      }

      .stripe {
        height: 100%;
        width: 2%;
        bottom: 0%;
        max-height: 0%;
        background-color: black;
        position: fixed;
        animation: ani 1s linear 1 forwards;
        transform: skew(-10deg);
        transform-origin: left bottom;
      }




      .stripe:nth-child(1) {
        margin-left: 0%;
        animation-delay: 0.0s;
      }

      .stripe:nth-child(2) {
        margin-left: 4%;
        animation-delay: 0.2s;
      }

      .stripe:nth-child(3) {
        margin-left: 8%;
        animation-delay: 0.4s;
      }

      .stripe:nth-child(4) {
        margin-left: 12%;
        animation-delay: 0.6s;
      }

      .stripe:nth-child(5) {
        margin-left: 16%;
        animation-delay: 0.8s;
      }

      .stripe:nth-child(6) {
        margin-left: 20%;
        animation-delay: 1s;
      }

      .stripe:nth-child(7) {
        margin-left: 24%;
        animation-delay: 1.2s;
      }

      .stripe:nth-child(8) {
        margin-left: 28%;
        animation-delay: 1.4s;
      }

      .stripe:nth-child(9) {
        margin-left: 32%;
        animation-delay: 1.6s;
      }

      .stripe:nth-child(10) {
        margin-left: 36%;
        animation-delay: 1.8s;
      }

      .stripe:nth-child(11) {
        margin-left: 40%;
        animation-delay: 2s;
      }

      .stripe:nth-child(12) {
        margin-left: 44%;
        animation-delay: 2.2s;
      }

      .stripe:nth-child(13) {
        margin-left: 48%;
        animation-delay: 2.4s;
      }

      .stripe:nth-child(14) {
        margin-left: 52%;
        animation-delay: 2.6s;
      }

      .stripe:nth-child(15) {
        margin-left: 56%;
        animation-delay: 2.8s;
      }

      .stripe:nth-child(16) {
        margin-left: 60%;
        animation-delay: 3s;
      }

      .stripe:nth-child(17) {
        margin-left: 64%;
        animation-delay: 3.2s;
      }

      .stripe:nth-child(18) {
        margin-left: 68%;
        animation-delay: 3.4s;
      }

      .stripe:nth-child(19) {
        margin-left: 72%;
        animation-delay: 3.6s;
      }

      .stripe:nth-child(20) {
        margin-left: 76%;
        animation-delay: 3.8s;
      }

      .stripe:nth-child(21) {
        margin-left: 80%;
        animation-delay: 4s;
      }

      .stripe:nth-child(22) {
        margin-left: 84%;
        animation-delay: 4.2s;
      }

      .stripe:nth-child(23) {
        margin-left: 88%;
        animation-delay: 4.4s;
      }

      .stripe:nth-child(24) {
        margin-left: 92%;
        animation-delay: 4.6s;
      }

      .stripe:nth-child(25) {
        margin-left: 96%;
        animation-delay: 4.8s;
      }



      @keyframes ani {
        0% {
          max-height: 0%;
        }
        100% {
          max-height: 100%;
        }
      }

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div class="mask">
      <div class="container">
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      	<div class="stripe"></div>
      </div>
    </div>
  </body>
</html>

感谢您的帮助！

Answer 1

一种不同的方法：

底部的主要容器
条纹容器作为柔性盒，条纹对齐底部。
高度动画

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.mask {
  max-height: 100%;
  width: 100%;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
}

.container {
  display: flex;
  align-items: flex-end;
  margin-left:-20%;
}

.stripe {
  float: left;
  height: 0;
  width: 2%;
  margin: 0 1%;
  bottom: 0;
  background-color: black;
  transform: skew(-20deg);
  transform-origin: left bottom;
  animation: ani 1s linear 1 forwards;
}

.stripe:nth-child(1) {
  animation-delay: 0.0s;
}

.stripe:nth-child(2) {
  animation-delay: 0.2s;
}

.stripe:nth-child(3) {
  animation-delay: 0.4s;
}

.stripe:nth-child(4) {
  animation-delay: 0.6s;
}

.stripe:nth-child(5) {
  animation-delay: 0.8s;
}

.stripe:nth-child(6) {
  animation-delay: 1s;
}

.stripe:nth-child(7) {
  animation-delay: 1.2s;
}

.stripe:nth-child(8) {
  animation-delay: 1.4s;
}

.stripe:nth-child(9) {
  animation-delay: 1.6s;
}

.stripe:nth-child(10) {
  animation-delay: 1.8s;
}

.stripe:nth-child(11) {
  animation-delay: 2s;
}

.stripe:nth-child(12) {
  animation-delay: 2.2s;
}

.stripe:nth-child(13) {
  animation-delay: 2.4s;
}

.stripe:nth-child(14) {
  animation-delay: 2.6s;
}

.stripe:nth-child(15) {
  animation-delay: 2.8s;
}

.stripe:nth-child(16) {
  animation-delay: 3s;
}

.stripe:nth-child(17) {
  animation-delay: 3.2s;
}

.stripe:nth-child(18) {
  animation-delay: 3.4s;
}

.stripe:nth-child(19) {
  animation-delay: 3.6s;
}

.stripe:nth-child(20) {
  animation-delay: 3.8s;
}

.stripe:nth-child(21) {
  animation-delay: 4s;
}

.stripe:nth-child(22) {
  animation-delay: 4.2s;
}

.stripe:nth-child(23) {
  animation-delay: 4.4s;
}

.stripe:nth-child(24) {
  animation-delay: 4.6s;
}

.stripe:nth-child(25) {
  animation-delay: 4.8s;
}

@keyframes ani {
  0% {
    height: 0vh;
  }
  100% {
    height: 100vh;
  }
}

<!DOCTYPE html>
<html>

<head>
</head>

<body>
  <div class="mask">
    <div class="container">
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
      <div class="stripe"></div>
    </div>
  </div>
</body>

</html>

注意：条纹可以是身体的直接孩子。你只需要一个父容器。

CSS动画条纹不起作用

嘿伙计们，

首先：

第二

1 个答案: