<template>
<div class="anima">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
<div class="box6"></div>
<div class="box7"></div>
<div class="box8"></div>
<div class="box9"></div>
<div class="box10"></div>
<div class="box11"></div>
<div class="box12"></div>
</div>
</template>
<script>
export default {
name: 'Animation'
}
</script>
<style lang="less" scoped>
.anima {
width: .52rem;
height: .25rem;
display: flex;
justify-content: space-between;
overflow: hidden;
div {
width: .02rem;
height: 100%;
background-color: #00bfff;
animation: line .8s forwards linear infinite alternate;
}
.box1 {
animation-delay: .1s;
}
.box2 {
animation-delay: .2s;
}
.box3 {
animation-delay: .3s;
}
.box4 {
animation-delay: .4s;
}
.box5 {
animation-delay: .2s;
}
.box6 {
animation-delay: .1s;
}
.box7 {
animation-delay: .2s;
}
.box8 {
animation-delay: .3s;
}
.box9 {
animation-delay: .2s;
}
.box10 {
animation-delay: .4s;
}
.box11 {
animation-delay: .5s;
}
.box12 {
animation-delay: .6s;
}
@keyframes line {
from {
margin-top: 0;
}
to {
margin-top: .25rem;
}
}
}
</style>
效果图