先看效果
原理就是先把页面分成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')) }) }) },
