前端百叶窗动画效果

先看效果

原理就是先把页面分成x列等宽的div，然后每一列根据你想要的动画变幻的次数再分成几个div，每一次动画变化实际上就是每一个小div宽度由0%变成100%的过程，以此类推，下面上代码（vue模板）

html部分

<template>
  <div class="hello">
    <div class="con d1">
      <div class="i1"></div>
      <div class="i2"></div>
      <div class="i3"></div>
      <div class="i4"></div>
      <div class="i5"></div>
    </div>
    <div class="con d2">
      <div class="i1"></div>
      <div class="i2"></div>
      <div class="i3"></div>
      <div class="i4"></div>
      <div class="i5"></div>
    </div>
    <div class="con d3">
      <div class="i1">大</div>
      <div class="i2">大</div>
      <div class="i3">大</div>
      <div class="i4">大</div>
      <div class="i5">大</div>
    </div>
    <div class="con d4">
      <div class="i1">家</div>
      <div class="i2">家</div>
      <div class="i3">家</div>
      <div class="i4">家</div>
      <div class="i5">家</div>
    </div>
    <div class="con d5">
      <div class="i1">好</div>
      <div class="i2">好</div>
      <div class="i3">好</div>
      <div class="i4">好</div>
      <div class="i5">好</div>
    </div>
    <div class="con d6">
      <div class="i1"></div>
      <div class="i2">我</div>
      <div class="i3">我</div>
      <div class="i4">我</div>
      <div class="i5">我</div>
    </div>
    <div class="con d7">
      <div class="i1"></div>
      <div class="i2"></div>
      <div class="i3">是</div>
      <div class="i4">是</div>
      <div class="i5">是</div>
    </div>
    <div class="con d8">
      <div class="i1"></div>
      <div class="i2"></div>
      <div class="i3"></div>
      <div class="i4">兔</div>
      <div class="i5">兔</div>
    </div>
    <div class="con d9">
      <div class="i1"></div>
      <div class="i2"></div>
      <div class="i3"></div>
      <div class="i4">子</div>
      <div class="i5">子</div>
    </div>
    <div class="con d10">
      <div class="i1"></div>
      <div class="i2"></div>
      <div class="i3"></div>
      <div class="i4"></div>
      <div class="i5 fa fa-free-code-camp"></div>
    </div>
    <div class="con d11">
      <div class="i1"></div>
      <div class="i2"></div>
      <div class="i3"></div>
      <div class="i4"></div>
      <div class="i5"></div>
    </div>
    <div class="con d12">
      <div class="i1"></div>
      <div class="i2"></div>
      <div class="i3"></div>
      <div class="i4"></div>
      <div class="i5"></div>
    </div>
  </div>
</template>

css部分

.hello{
  height: 100vh;
}
.con{
  display: inline-flex;
  width: 8%;
  position: relative;
  height: 100%;
}
.con div{
  width: 0;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  color: #fff;
  font-size: 36px;
  font-style: italic;
}
.con .i1{
  background: lightyellow;
  font-style: italic;
}
.con .i2{
  background: green;
  animation: move 0.6s 0.7s linear forwards;
}
.con .i3{
  background: hotpink;
  animation: move 0.6s 1.4s linear forwards;
}
.con .i4{
  background: pink;
  animation: move 0.6s 2.1s linear forwards;
}
.con .i5{
  background: lightpink;
  animation: move 0.6s linear forwards;
}

@keyframes move {
  0%{
    width: 0;
  }
  100%{
    width: 100%;
  }
}

js部分

mounted(){
    this.$nextTick(()=>{
      $('.con').each(function () {
        let index = $(this).index()
        let start = 2.8
        $(this).find('.i5').css('animation-delay',start + index / 5 + 's')
        console.log($(this).find('.i5'))
      })
    })
  },