E-commerce/src/components/flashCloud/index.vue

<!--
 描述: 闪动云
 作者: Jack Chen
 日期: 2020-05-02
-->

<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">闪动云</div>
      <div class="sn-body">
        <div class="wrap-container cloud">
          <div class="pd-main-left">
            <div class="yun-container">
              <div class="yun-tree"></div>
              <div class="line-fs"></div>
              <div class="line-fs"></div>
              <div class="line-fs"></div>
              <div class="line-fs"></div>
              <div class="line-fs"></div>
              <div class="line-fs"></div>
              <div class="line-fs"></div>
              <div class="line-fs"></div>
              <div class="line-fs"></div>
            </div>

            <div id="yunText" class="yun-text">
              <div
                :id="`yunText-${index + 1}`"
                :class="{ 'span-flash': number == index }"
                v-for="(item, index) in arrData"
                :key="index"
              >
                <span :title="item.title">{{ item.title }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: `flashCloud`,
  data() {
    return {
      number: 0,
      arrData: [
        {
          title: `JavaScript`,
        },
        {
          title: `Vue.js`,
        },
        {
          title: `React.js`,
        },
        {
          title: `Node.js`,
        },
        {
          title: `Angular`,
        },
        {
          title: `HTML5`,
        },
        {
          title: `CSS3`,
        },
        {
          title: `jQuery`,
        },
        {
          title: `Typescript`,
        },
        {
          title: `Bootstrap`,
        },
        {
          title: `WebApp`,
        },
        {
          title: `小程序`,
        },
        {
          title: `HTTP`,
        },
        {
          title: `Sass/Less`,
        },
        {
          title: `Webpack`,
        },
        {
          title: `ES6`,
        },
      ],
    }
  },
  mounted() {
    let len = 5
    this.timer = setInterval(() => {
      this.number = parseInt(Math.random() * 15, 10)
      if (len == 0) {
        len = 5
        return this.arrData.sort(() => Math.random() - 0.5)
      } else {
        len--
      }
    }, 2000)
  },
  methods: {},
  beforeDestroy() {
    clearInterval(this.timer)
  },
}
</script>

<style lang="scss" scoped>
.sn-container {
  left: 512px;
  top: 1978px;
  width: 432px;
  height: 400px;
  .cloud {
    left: 55px;
    top: 0;
    width: 80%;
    height: 100%;
  }

  .pd-main-left {
    position: relative;
    width: 310px;
    height: 335px;
    .yun-container {
      width: 100%;
      height: 100%;
      > div {
        &:nth-child(2) {
          height: 90%;
          -webkit-animation-duration: 2s;
          -moz-animation-duration: 2s;
          -o-animation-duration: 2s;
          animation-duration: 2s;
          -webkit-animation-delay: 1.5s;
          -moz-animation-delay: 1.5s;
          -o-animation-delay: 1.5s;
          animation-delay: 1.5s;
          bottom: 0;
          left: 51px;
        }
        &:nth-child(3) {
          height: 100%;
          -webkit-animation-duration: 3s;
          -moz-animation-duration: 3s;
          -o-animation-duration: 3s;
          animation-duration: 3s;
          -webkit-animation-delay: 0s;
          -moz-animation-delay: 0s;
          -o-animation-delay: 0s;
          animation-delay: 0s;
          bottom: 32px;
          left: 89px;
        }
        &:nth-child(4) {
          height: 100%;
          -webkit-animation-duration: 2.5s;
          -moz-animation-duration: 2.5s;
          -o-animation-duration: 2.5s;
          animation-duration: 2.5s;
          -webkit-animation-delay: 1s;
          -moz-animation-delay: 1s;
          -o-animation-delay: 1s;
          animation-delay: 1s;
          bottom: 3px;
          left: 179px;
          -webkit-filter: hue-rotate(180deg);
          filter: hue-rotate(180deg);
        }
        &:nth-child(5) {
          height: 90%;
          -webkit-animation-duration: 2s;
          -moz-animation-duration: 2s;
          -o-animation-duration: 2s;
          animation-duration: 2s;
          -webkit-animation-delay: 2s;
          -moz-animation-delay: 2s;
          -o-animation-delay: 2s;
          animation-delay: 2s;
          bottom: 42px;
          left: 229px;
        }
        &:nth-child(6) {
          height: 100%;
          -webkit-animation-duration: 2.5s;
          -moz-animation-duration: 2.5s;
          -o-animation-duration: 2.5s;
          animation-duration: 2.5s;
          -webkit-animation-delay: 0.5s;
          -moz-animation-delay: 0.5s;
          -o-animation-delay: 0.5s;
          animation-delay: 0.5s;
          bottom: 11px;
          right: 48px;
        }
        &:nth-child(7) {
          height: 90%;
          -webkit-animation-duration: 3s;
          -moz-animation-duration: 3s;
          -o-animation-duration: 3s;
          animation-duration: 3s;
          -webkit-animation-delay: 2.5s;
          -moz-animation-delay: 2.5s;
          -o-animation-delay: 2.5s;
          animation-delay: 2.5s;
          bottom: -22px;
          right: 174px;
          -webkit-filter: hue-rotate(180deg);
          filter: hue-rotate(180deg);
        }
        &:nth-child(8) {
          height: 90%;
          -webkit-animation-duration: 3s;
          -moz-animation-duration: 3s;
          -o-animation-duration: 3s;
          animation-duration: 3s;
          -webkit-animation-delay: 1.5s;
          -moz-animation-delay: 1.5s;
          -o-animation-delay: 1.5s;
          animation-delay: 1.5s;
          bottom: -22px;
          right: 100px;
        }
        &:nth-child(9) {
          height: 100%;
          -webkit-animation-duration: 2.5s;
          -moz-animation-duration: 2.5s;
          -o-animation-duration: 2.5s;
          animation-duration: 2.5s;
          -webkit-animation-delay: 2s;
          -moz-animation-delay: 2s;
          -o-animation-delay: 2s;
          animation-delay: 2s;
          bottom: -10px;
          right: 220px;
        }
        &:nth-child(10) {
          height: 95%;
          -webkit-animation-duration: 2s;
          -moz-animation-duration: 2s;
          -o-animation-duration: 2s;
          animation-duration: 2s;
          -webkit-animation-delay: 1s;
          -moz-animation-delay: 1s;
          -o-animation-delay: 1s;
          animation-delay: 1s;
          bottom: -41px;
          right: 182px;
        }
      }
      background: url(../../assets/img/pd-main-left-bg-2.png) no-repeat 50% 50%;
      .yun-tree {
        width: 100%;
        height: 100%;
        background: url(../../assets/img/pd-main-left-bg-tree.png) no-repeat 50%
          bottom;
        mix-blend-mode: screen;
      }
      .line-fs {
        width: 14px;
        height: 100%;
        background-image: url(../../assets/img/line-fs.png);
        background-repeat: no-repeat;
        background-position: 50% 150%;
        position: absolute;
        z-index: -1;
        -webkit-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
        -moz-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
        -o-animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
        animation: fs 3s cubic-bezier(1, 0, 0.6, 0.6) infinite;
      }
    }

    .yun-text {
      position: absolute;
      width: 318px;
      height: 195px;
      top: 0;
      left: 50%;
      margin-left: -161px;
      z-index: 2;
      .span-flash {
        color: #00f6ff;
        font-size: 12px;
        -webkit-animation-name: yun-flash;
        -moz-animation-name: yun-flash;
        -o-animation-name: yun-flash;
        animation-name: yun-flash;
        -webkit-animation-duration: 1s;
        -moz-animation-duration: 1s;
        -o-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-iteration-count: 1;
        -moz-animation-iteration-count: 1;
        -o-animation-iteration-count: 1;
        animation-iteration-count: 1;
      }
      div {
        position: absolute;
        white-space: nowrap;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        width: 70px;
        height: 36px;
        line-height: 36px;
        word-wrap: break-word;
        word-break: break-all;
        opacity: 0.8;
        color: #00f6ff;
        span {
          font-size: 12px;
          cursor: pointer;
        }
        &:nth-child(1) {
          top: 84px;
          left: 26px;
        }
        &:nth-child(2) {
          top: 13px;
          left: 157px;
        }
        &:nth-child(3) {
          top: 105px;
          left: 35px;
        }
        &:nth-child(4) {
          top: 38px;
          left: 89px;
        }
        &:nth-child(5) {
          top: 43px;
          left: 178px;
        }
        &:nth-child(6) {
          top: 76px;
          left: 227px;
        }
        &:nth-child(7) {
          top: 63px;
          left: 66px;
        }
        &:nth-child(8) {
          top: 156px;
          left: 43px;
        }
        &:nth-child(9) {
          top: 130px;
          left: 16px;
        }
        &:nth-child(10) {
          top: 93px;
          left: 128px;
        }
        &:nth-child(11) {
          top: 106px;
          left: 241px;
        }
        &:nth-child(12) {
          top: 121px;
          left: 112px;
        }
        &:nth-child(13) {
          top: 67px;
          left: 153px;
        }
        &:nth-child(14) {
          top: 157px;
          left: 207px;
        }
        &:nth-child(15) {
          top: 132px;
          left: 206px;
        }
        &:nth-child(16) {
          top: 150px;
          left: 117px;
        }
      }
    }
  }
}

@-webkit-keyframes fs {
  0% {
    background-position: 50% 150%;
  }
  50% {
    background-position: 50% -132%;
  }
  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}
@-moz-keyframes fs {
  0% {
    background-position: 50% 150%;
  }
  50% {
    background-position: 50% -132%;
  }
  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}
@-o-keyframes fs {
  0% {
    background-position: 50% 150%;
  }
  50% {
    background-position: 50% -132%;
  }
  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}
@keyframes fs {
  0% {
    background-position: 50% 150%;
  }
  50% {
    background-position: 50% -132%;
  }
  100% {
    background-position: 50% -264%;
    opacity: 0;
  }
}

@-webkit-keyframes yun-flash {
  from,
  50%,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@-moz-keyframes yun-flash {
  from,
  50%,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@-o-keyframes yun-flash {
  from,
  50%,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
@keyframes yun-flash {
  from,
  50%,
  to {
    opacity: 1;
  }
  25%,
  75% {
    opacity: 0;
  }
}
</style>