vue 动画气泡背景

vue2 背景气泡

结构如下
思想如下 一个div 代表一个气泡

<div class="backgroundBubble">
	<div class='bubble'>*10
</div>

利用render函数生成10个div 就不必手写div
后续想要增加气泡增加length的长度
然后样式采用css动画。

• 注意下面scss调用的数组长度为10，如果想要增加气泡 也要增加数组。

<script>
export default {
  name: 'bubbles',
  data() {
    return {}
  },
  render(h) {
    return h(
      'div',
      {
        class: {
          backgroundBubble: true,
        },
      },
      Array.apply(null, { length: 10 }).map(function () { //这里的length 代表生成几个气泡
        return h('div', {
          class: {
            bubble: true,
          },
        })
      })
    )
  },
}
</script>
<style lang="scss" scoped>
.backgroundBubble {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  $duration: 9s, 6s, 10s, 5.5s, 12s, 6s, 8s, 15s, 9s, 12s; //这里写了10个数组避免没有采用随机数
  $delay: 0.1s, 1.5s, 0s, 1.5s, 0s, 1s, 1s, 0s, 0.5s, 0s;
  @for $i from 1 through length($duration) {
    $item-duration: nth($duration, $i);
    $item-delay: nth($delay, $i);
    $random: random() * 100 + px; // 随机数的气泡大小  刷新会刷新位置与气泡大小
    $left: random() * 100%; // 随机的气泡位置。 可以像上面一样定义成数组
    .bubble:nth-child(#{$i}) {
      left: $left;
      width: $random;
      height: $random;
      animation-duration: $item-duration;
      animation-delay: $item-delay;
    }
  }
}
.bubble {
  position: absolute;
  border-radius: 50%;
  border: 1px solid #fff;
  box-shadow: inset 0 0 6px #fff;
  animation: flutter 10s infinite;
  opacity: 0;
}
@keyframes flutter {
  0% {
    transform: translateX(0);
    bottom: -100px;
    opacity: 1;
  }
  50% {
    transform: translateX(100px);
    opacity: 0.5;
  }

  100% {
    transform: translateX(0px);
    bottom: 100%;
    opacity: 0;
  }
}
</style>