javascript - 如何在 css 中创建带有动画的设计字母 z

Question

我想在动画中创建字母 z。以这样的方式，第一部分 (1) 以从左到右的动画毫不延迟地出现。当第一部分 (1) 到达右侧时，第二部分 (2) 将从上到下以动画形式出现。当第二部分（2）向下时，第三部分（3）会从左到右出现动画。这个动画的问题是所有三个部分 (1-2-3) 一起出现，而我希望它们交替出现并延迟出现。预先感谢您的合作。

#global{
    width:200px;
    position:relative;
    cursor:pointer;
    height:200px;
    background-color: black;
    padding: 1rem;
}

.mask{
    position:absolute;
    border-radius:2px;
    overflow:hidden;
    perspective: 1000;
    backface-visibility: hidden;
}

.plane{
    background:#ffffff;
    width:400%;
    height:100%;
    position:absolute;
    transform : translate3d(0px,0,0);
    z-index:100;
    perspective: 1000;
    backface-visibility: hidden;
    
}

#top .plane{
    z-index:2000;
    animation: trans1 1s ease-in infinite  0s forwards;
    -webkit-animation: trans1 1s ease-in infinite  0s forwards;
}

#middle .plane{
    transform: translate3d(0px,0,0);
    background: #bbbbbb;
    animation: trans2 1s linear infinite  2s  forwards;
    -webkit-animation: trans2 1s linear infinite  2s  forwards;
}

#bottom .plane{
    z-index:2000;
    animation: trans3 2s ease-out infinite  4s forwards;
    -webkit-animation: trans3 2s ease-out infinite  4s forwards;
}
  
#top{
    width:200px;
    height:15px;
    left:0;
    z-index:100;
    transform: skew(-15deg, 0);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

#middle{
    width:187px;
    height:25px;
    left:6px;
    top:78px;
    transform:skew(-15deg, -40deg);
    -webkit-transform:skew(-15deg, -40deg);
    -moz-transform:skew(-15deg, -40deg);
    -ms-transform:skew(-15deg, -40deg);
    -o-transform:skew(-15deg, -40deg);
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

#bottom{
    width:200px;
    height:15px;
    top:159px;
    transform: skew(-15deg, 0);
    -webkit-transform: skew(-15deg, 0);
    -moz-transform: skew(-15deg, 0);
    -ms-transform: skew(-15deg, 0);
    -o-transform: skew(-15deg, 0);
    border-radius: 20px;
}
  
@keyframes trans1{ 
    0% {
        width: 0%;
        left: 0;
    }
    100% {
        width: 100%;
        left: 0;
    }
}

@keyframes trans2{ 
    0% {
        width: 0%;
        left: 100%;
    }
    100% {
        width: 100%;
        left: 0;
    }
}

@keyframes trans3{ 
    0% {
        width: 0%;
        left: 0;
    }
    100% {
        width: 100%;
        left: 0;
    }
}

<div id="global">
      <div id="top" class="mask">
          <div class="plane"></div>
      </div>
      <div id="middle" class="mask">
          <div class="plane"></div>
      </div>
      <div id="bottom" class="mask">
          <div class="plane"></div>
      </div>
  </div>

标签： javascripthtmlcss

Answer 1

这个片段对事情的看法略有不同。

每条线都有一个 3 秒的动画，顶部的动画在第一秒内动画到它的全宽，即前 33.33% 的时间，第二个在第二秒内动画到全宽，第三个在第三秒内动画到全宽。

这样就可以处理诸如开始时不可见的线条之类的方面。

#global {
  width: 200px;
  position: relative;
  cursor: pointer;
  height: 200px;
  background-color: black;
  padding: 1rem;
}

.mask {
  position: absolute;
  border-radius: 2px;
  overflow: hidden;
  perspective: 1000;
  backface-visibility: hidden;
}

.plane {
  background: #ffffff;
  width: 400%;
  height: 100%;
  position: absolute;
  transform: translate3d(0px, 0, 0);
  z-index: 100;
  perspective: 1000;
  backface-visibility: hidden;
}

#top .plane {
  z-index: 2000;
  animation: trans1 3s ease-in infinite forwards;
}

#middle .plane {
  transform: translate3d(0px, 0, 0);
  background: #bbbbbb;
  animation: trans2 3s linear infinite forwards;
}

#bottom .plane {
  z-index: 2000;
  animation: trans3 3s ease-out infinite forwards;
}

#top {
  width: 200px;
  height: 15px;
  left: 0;
  z-index: 100;
  transform: skew(-15deg, 0);
  border-radius: 20px;
}

#middle {
  width: 187px;
  height: 25px;
  left: 6px;
  top: 78px;
  transform: skew(-15deg, -40deg);
  border-radius: 20px;
}

#bottom {
  width: 200px;
  height: 15px;
  top: 159px;
  transform: skew(-15deg, 0);
  border-radius: 20px;
}

@keyframes trans1 {
  0% {
    width: 0%;
    left: 0;
  }
  33.33% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 100%;
    left: 0;
  }
}

@keyframes trans2 {
  0% {
    width: 0%;
    left: 100%;
  }
  33.33% {
    width: 0%;
    left: 100%;
  }
  66.66% {
    width: 100%;
    left: 0;
  }
  100% {
    width: 100%;
    left: 0;
  }
}

@keyframes trans3 {
  0% {
    width: 0%;
    left: 0;
  }
  66.66% {
    width: 0%;
    left: 0;
  }
  100% {
    width: 100%;
    left: 0;
  }
}

<div id="global">
  <div id="top" class="mask">
    <div class="plane"></div>
  </div>
  <div id="middle" class="mask">
    <div class="plane"></div>
  </div>
  <div id="bottom" class="mask">
    <div class="plane"></div>
  </div>
</div>