随机生成小球（万家灯火的感觉）

事发年前（新冠之前），拿到一张psd，全部静态，老板说想让他动起来，在我们这种老板吃死技术的小公司只能自己想办法，你想要ui，no我们只有美工哈哈哈，独立自强的我瞬间想到transition、enter、leave、cubic-bezier之类的，搞搞搞。

 

结果领导很满意，唰~唰~唰~很不错，这里就不展开说

正题来了，首页老板说想要万家灯火的感觉，我记得之前我看到过一个类似的动效，凭着我模糊的记忆，好，我给你万家灯火的感觉~

美工给我的大概是这样

结果大概是这样 

js

 

/**
   * 1 定义三组数据，大中小三个球
   * 2 定义不超过屏幕的随机数，初始化小球的位置,使用绝对定位
   * 3 每隔一秒，屏幕随机出现十个随机小球
   * 4 减小小球的top改变小球的位置使其向上移动
   * 5 小球的速度与球的大小有关，越大越慢
   */
var domList = [
  {
    style: 'width: 3px;height: 3px;border-radius: 3px;z-index: 99999;display:block;background-color:rgba(255,255,255,.7);position: fixed',
    speed: 1.5
  },
  {
    style: 'width: 2px;height: 2px;z-index: 99999;display:block;background-color:rgba(255,255,255,.7);position: fixed',
    speed: 3
  },
  {
    style: 'width: 1px;height: 1px;z-index: 99999;display:block;background-color:rgba(255,255,255,.7);position: fixed',
    speed: 5
  }
]
var fullScreenAnimate = {
  /**
   * 制作小球
   */
  makeDom () {
    let index = Math.ceil(Math.random() * 3) - 1 // 小球索引，取出三个小球中的一个（不要直接x2，0的几率会很小）
    let x = Math.ceil(Math.random() * 100) // 小球x轴位置
    let y = this.randomNum(20, 100) // 小球y轴位置
    // let style = `${domList[index - 1].style};left:${x}vw;top:${y}vh;transition:top ${y / domList[index - 1].speed}s`
    let style = `${domList[index].style};left:${x}vw;top:${y}vh;animation: fullScreenAnimate ${y / domList[index].speed}s linear infinite`
    return style
  },
  init () {
    let arr = []
    for (let i = 0; i < 160; i++) {
      arr.push(
        {
          style: this.makeDom()
        }
      )
    }
    return arr
  },
  // 生成从minNum到maxNum的随机数
  randomNum (minNum, maxNum) {
    switch (arguments.length) {
      case 1:
        return parseInt(Math.random() * minNum + 1, 10)
        break
      case 2:
        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10)
        break
      default:
        return 0
        break
    }
  }
}
export default fullScreenAnimate

调用init方法会给到一个dom列表，v-for就可以了

css

@keyframes fullScreenAnimate {
  100% {
    top: 0;
  }
}

@-webkit-keyframes fullScreenAnimate /* Safari 与 Chrome */ {
  100% {
    top: 0;
  }
}