Vue 風車アニメーション アイコンのデモ ケース

風車アニメーションアイコン

<template>
  <div class="view3d" id="view3d">
    <div class="wrap" id="wrap">
      <div class="item" v-for="(item, idx) in list" :style="`right: ${ rights[idx] }; bottom: ${ bottoms[idx] };`">
        <!-- 编号 -->
        <div>#{
   
   { item.mark }}</div>
        <!-- 箭头 -->
        <span class="el-icon-top" :style="`transform: rotate(${item.fx}deg);`"></span>
        <div class="pole">
          <!-- 会变色的柱子 -->
          <div class="pillar" :style="`height: ${ item.fs / 15 * 100 }%; background: ${ item.fs / 15 * 100 < 33 ? '#99FF00' : item.fs / 15 * 100 < 66  ? '#009900' : item.fs / 15 * 100 <= 100 ? 'red' : ''}`"></div>
          <!-- 风车 -->
          <div class="windmill" :style="`animation-duration: ${fsArr[item.fs]}s;`"><span></span><span></span><span></span><span></span></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: "wind_speed_and_direction",
  data() {
    return {
      list: [],
      // 动画的速度, 与风速对应, 风速越大对应的时间就越短, 风车转的就越快
      fsArr: ['', 7.5, 7, 6.5, 6, 5.5, 5, 4.5, 4, 3.5, 3, 2.5, 2, 1.5, 1, 0.5],
      // 风车的位置, 可动态添加, 数量不限
      rights: ['48%', '43.8%', '52.5%', '41%', '39.5%', '36.4%', '38%', '33.2%', '34.5%', '31.3%', '26%', '19.9%', '16.89%', '12.89%', '36%', '29%', '38%', '42.2%', '44%', '45.4%', '46.6%', '48.3%'],
      bottoms: ['86.6%', '88.2%', '86.5%', '63%', '55%', '57.2%', '51.2%', '44.6%', '37.6%', '40.6%', '41.6%', '41%', '42.6%', '43%', '22.8%', '26.6%', '14%', '13%', '11.5%', '10%', '7.5%', '6%'],
      timer: null
    }
  },
  created() {
    this.listData()
  },
  mounted() {
    this.timer = setInterval(this.listData, 3000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
    this.timer = null
  },
  methods: {
    listData() {
      this.list = []
      for (let i = 0; i < 22; i++) {
        this.list.push({ mark: i+1, fs: Math.round(Math.random() * 15), fx: Math.round(Math.random() * 720) })
      }
    }
  }
}
</script>

<style scoped lang="scss">
.view3d {
  height: 880px;
  .wrap {
    position: relative;
    height: 100%;
    background: #000;
    .item {
      position: absolute;
      padding: 22px 3px 2px;
      border-radius: 8px 8px 0 0;
      background-color: rgba(255, 255, 255, 0.8);
      transform: translateY(20px);
      cursor: pointer;
      text-align: center;
      .el-icon-top,
      .pole,
      .windmill,
      .windmill span {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
      }
      .el-icon-top {
        transform-origin: 50% 50%;
        transition: 1s transform linear;
        font: 700 22px 'microsoft yahei';
      }
      .pole {
        transform: translateY(-100%);
        width: 5px;
        height: 25px;
        background-color: #fff;
        .pillar {
          position: absolute;
          bottom: 0;
          width: 100%;
        }
        .windmill {
          top: -7px;
          left: -1.5px;
          width: 8px;
          height: 8px;
          border-radius: 5px;
          background-color: rgb(231, 238, 238);
          animation: spin infinite linear;
          span {
            bottom: 0;
            left: 50%;
            width: 15px;
            height: 5px;
            background-color: #fff;
            border-bottom-right-radius: 500%;
            transform-origin: left;
            &:nth-child(1) {
              transform: rotate(120deg) translateX(2px);
            }
            &:nth-child(2) {
              transform: rotate(240deg) translateX(2px);
            }
            &:nth-child(3) {
              transform: rotate(360deg) translateX(2px);
            }
            &:nth-child(4) {
              left: 0;
              width: 70%;
              height: 70%;
              border-radius: 50%;
              border: 1px solid #b9b9b9;
            }
          }
        }
        @keyframes spin {
          0% {
            transform: rotate(0deg);
          }
          100% {
            transform: rotate(360deg);
          }
        }
      }
    }
  }
}
</style>