声音波纹

<template>
  <div class="wave-main">
    <div class="wave-item"
         v-for="i in 14"
         :key="i"></div>
  </div>
</template>
<script>
export default {
  name: 'Wave',
  data() {
    return {}
  },
  methods: {},
  created() {},
  mounted() {},
  computed: {},
}
</script>
<style lang="scss" scoped>
.wave-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  .wave-item {
    width: 4px;
    border-radius: 2px;
    background-color: #ffffff;
    &:nth-child(7n + 1) {
      height: 10px;
      animation: radius-animation 0.3s ease;
    }
    &:nth-child(7n + 2) {
      height: 40px;
      animation: radius-animation 0.6s ease;
    }
    &:nth-child(7n + 3) {
      height: 30px;
      animation: radius-animation 0.57s ease;
    }
    &:nth-child(7n + 4) {
      height: 40px;
      animation: radius-animation 0.52s ease;
    }
    &:nth-child(7n + 5) {
      height: 20px;
      animation: radius-animation 0.4s ease;
    }
    &:nth-child(7n + 6) {
      height: 25px;
      animation: radius-animation 0.3s ease;
    }
    &:nth-child(7n + 7) {
      height: 40px;
      animation: radius-animation 0.7s ease;
    }
  }
}

.wave-main .wave-item {
  animation-iteration-count: infinite !important;
  animation-direction: alternate !important;
}

@keyframes radius-animation {
  100% {
    height: 5px;
    border-radius: 50%;
    filter: contrast(2);
  }
}
</style>