css实现彩带掉落,css实现左右移动旋转下落

1.需求

中奖的时候弹出框同时并且彩带掉落

(主要还是实现彩带的效果)

2.实现思路

我相信大家都知道红包雨这个活动，当然我之前也做过,于是我基于红包雨来做,之前的红包雨: vue.js实现红包雨

而这个彩带与红包雨有四个区别:

1去掉点击红包雨这块,多余的都可以去掉
2单一的红包应该变成五颜六色
3彩带点需要旋转
4.彩带左右移动下落

思路:

1不用管
2用style进行匹配
3transform: rotate
4.子元素left来控制

3.代码

template

 <ul v-if="rainVisible" class="spark-section" id="spark-section">
    <template v-for="(item, index) in rainParams">
      <li class="move_1" :style="{ left: item.left, animationDuration:
      item.durTime, webkitAnimationDuration: item.durTime}" :data-index="index"
      @webkitAnimationEnd="removeDom" :key="index">
        <div class="move-item" :class="`spark-${(index + 1)%5}`"></div>
      </li>
    </template>
  </ul>

css

.spark-section {
  display: block;
  overflow: hidden;
  position: absolute;
  left: 0px;
  top: 0px;
  height: 120vh;
  width: 100vw;
  li {
    position: absolute;
    animation: all 3s linear;
    top:-100px;
    z-index: 0;
    &.move_1 {
      animation: aim_move 4s linear 1 forwards;
      position: relative;
    }
    .move-item {
      animation: cicle 2s infinite linear;
      position: absolute;
      left: 0px;
      top: 0px;
    }
    @keyframes cicle {
      0% {
        transform: rotate(0deg);
        left: 10px;
      }
      10% {
        transform: rotate(30deg);
        left: 0px;
      }
      20% {
        transform: rotate(60deg);
        left: -10px;
      }
      30% {
        transform: rotate(90deg);
        left: 0px;
      }
      40% {
        transform: rotate(120deg);
        left: 10px;
      }
      50% {
        transform: rotate(150deg);
        left: 0px;
      }
      60% {
        transform: rotate(180deg);
        left: -10px;
      }
      70% {
        transform: rotate(210deg);
        left: 0px;
      }
      80% {
        transform: rotate(240deg);
        left:10px;
      }
      90% {
        transform: rotate(240deg);
        left:0px;
      }
      100% {
        transform: rotate(270deg);
        left: -10px;
      }
    }
  }
  a {
    display: block;
  }
}
@keyframes aim_move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(120vh);
  }
}
.spark-1 {
  width: 24px;
  height: 24px;
  background: #FFE034;
}
.spark-2 {
  width: 24px;
  height: 24px;
  background: #2893FF;
}
.spark-3 {
  width: 24px;
  height: 24px;
  background: #15E3D1;
}
.spark-4 {
  width: 24px;
  height: 24px;
  background: #8A78FD;
}
.spark-0 {
  width: 24px;
  height: 24px;
  background: #FFA933;
}

js

data(){
    return {
          rainVisible: false,
          rainParams: [], // 所有星石
          timer: null,
          duration: ''
    }
}
created(){
    this.settingData = {
      continueTime: 1, // 下雨时长
      dropWealthNum: 30 // 在对应的时长里面,应该下落多少个红包
    }
    this.duration = this.settingData.continueTime * 1000
    this.continueTime = this.settingData.continueTime
}
methods: {
    startRedPacket () {
      const win = document.documentElement.clientWidth || document.body.clientWidth
      var plusOrMinus = Math.random() < 0.5 ? -1 : 1
      const left = parseInt(Math.random() * (win - 50) + 0) + Math.random() * 10 * plusOrMinus
      const rotate = (parseInt(Math.random() * (45 - (-45)) - 45)) + 'deg' // 旋转角度
      const durTime = (Math.random() * (2.5 - 1.2 + 1) + 1.2) + 's' // 时间
      // 1.2和1.2这个数值保持一样
      this.rainParams.push(
        {
          left: left + 'px',
          transforms: 'rotate(' + rotate + ')',
          durTime: durTime,
          isHide: false
        }
      )
      setTimeout(() => { // 多少时间结束
        clearTimeout(this.timer)
        this.timer = null
        return false
      }, this.duration)
      this.timer = setTimeout(() => {
        this.startRedPacket()
      }, Math.round(this.duration / this.settingData.dropWealthNum))
    },
    
    // 点击弹框
    show() {
        this.rainVisible = true
        this.dialogVisible = true
        this.normalVisible = true
        this.startRedPacket()
    }  
}

一定要在需要下彩条的时候才去调用startRedPacket(),其实最重要的思路就是彩带的基本位置靠父元素move_1来确定，而左右移动，旋转的动效靠子元素move-item来完成