CSS柱状图动画

最新推荐文章于 2023-03-22 00:51:37 发布

你六我里六六

最新推荐文章于 2023-03-22 00:51:37 发布

阅读量379

点赞数

文章标签： css 动画 css3

本文链接：https://blog.csdn.net/weixin_53874202/article/details/125747689

版权

<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>