祝福版的3D标签云动画特效VUE2版本

祝福版的3D标签云动画特效VUE2版本

<script>
export default {
  name: "dreamView",
  data() {
    return {
      words: [
        '健康码常绿',
        '股票飙红',
        '生意兴隆',
        '财源广进',
        '心想事成',
        '永远十八',
        '身体健康',
        '大富大贵',
        '大吉大利',
        '万事如意',
        '美梦成真',
        '吉祥如意',
        '鸿运当头',
        '五福临门',
        '吉星高照',
        '好运连连',
        '八面春风',
        '百事亨通',
        '万事大吉',
        '喜气洋洋',
        '岁岁今日',
        '年年今朝',
        '和气吉祥',
        '百事顺遂',
        '福星高照',
        '前途光明',
        '喜上眉梢',
        '荣华富贵',
        '家庭和睦',
        '爱情事业双丰收',
        '工作顺利',
        '百年好合',
        '龙马精神',
        '出入平安',
        '前程万里',
        '年年有余',
        '万事胜意',
        '福如东海',
        '寿比南山',
        '学业有成',
        '大展宏图',
        '顺风顺水',
        '事业辉煌',
        '生意红火',
        '吉时吉日疾如风',
        '丰年丰月如风增',
        '增福增财增长寿',
        '寿山寿海寿长生',
        '生财生利生贵子',
        '子孝孙贤代代荣',
        '荣华富贵年年有',
        '有钱有势有前程'
      ],
      dream: []
    }
  },
  mounted() {
    console.log(111)
    this.init_();
  },
  methods: {
    _randomNum(min, max) {
      var num = (Math.random() * (max - min + 1) + min).toFixed(2);
      console.log(333)
      return num;
    },
    init_() {
      console.log(222)

      this.words.forEach((item) => {
        var wordBoxStyle = {
          '--margin-top': `${this._randomNum(-40, 20)}vh`,
          '--margin-left': `${this._randomNum(6, 35)}vw`,
          '--animation-duration': `${this._randomNum(8, 20)}s`,
          '--animation-delay': `${this._randomNum(-20, 0)}s`,
        }
        var wordStyle = {
          color: `hsl(${this._randomNum(0, 240)},100%,65%)`
        }
        var obj = {
          word: item,
          wordBoxStyle,
          wordStyle
        }
        this.dream.push(obj);
      })
    }
  }
}
</script>

<template>
  <div class="container">
    <div v-for="(item,index) in dream" :style="item.wordBoxStyle" :key="index" class="word-box">
      <div class="word" :style="item.wordStyle">{{ item.word }}</div>
    </div>
  </div>
</template>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}

:root {
  /* 自定义属性，这几个属性等会是通过js随机生成，通过var函数可对其调用 */
  /* 上外边距 */
  --margin-top: 0;
  /* 左外边距 */
  --margin-left: 0;
  /* 动画时长 */
  --animation-duration: 0s;
  /* 动画延迟时间 */
  --animation-delay: 0s;
}

.container {
  /* 100%窗口高度 */
  height: 100vh;
  width: 100vw;
  max-width: 100vw;
  /* 弹性布局 居中显示 */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #111;
  /* 溢出隐藏 */
  overflow: hidden;
  /* 设置视距 */
  perspective: 1300px;
}

div {
  /* 所有div默认开启3D属性 */
  transform-style: preserve-3d;
}

.word-box,
.word-box .word {
  position: absolute;
  /* 执行动画：动画名 时长 线性的 无限次播放 */
  animation: rotY 0s linear infinite;
  /* 设置动画时长 */
  animation-duration: var(--animation-duration);
  /* 设置动画延迟 */
  animation-delay: var(--animation-delay);
}

.word-box {
  margin-top: var(--margin-top);
}

.word-box .word {
  margin-left: var(--margin-left);
}

.word-box .word {
  /* 反向动画 */
  animation-direction: reverse;
}

/* 定义动画 */
@keyframes rotY {
  to {
    /* 1turn表示一圈 */
    transform: rotateY(1turn);
  }
}
</style>