css demo —— 鼠标滑动效果

效果展示如下

昨夜逛youtube的时候发现一博主实现的css hover效果，看上去挺酷的，然后自己模仿做了下，代码如下

css部分

body {
	margin: 0
}

.container {
  //全屏样式
  width: 100vw;
  height: 100vh;
  background: #000;
  animation: changeBgColor 4s infinite;
  display: flex;
  flex-flow: row wrap;
  overflow: hidden;
  
  //调整flex 多行元素对齐
  align-content: flex-start;

  //颜色轮换的代码
  @keyframes changeBgColor {
    0% {
      filter: hue-rotate(0deg);
    }

    100% {
      filter: hue-rotate(360deg);
    }
  }

  span {
    width: 40px;
    height: 40px;
    position: relative;

    //发光点的设置
    &:before {
      $color: greenyellow;

      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background-color: $color;
      border-radius: 50%;
      transform: scale(0.1);
      transition: transform 2s;
      box-shadow: 0 0 10px $color,
        0 0 20px $color,
        0 0 40px $color,
        0 0 60px $color,
        0 0 80px $color,
        0 0 100px $color
    }

    //发光点被hover时，动画放大
    &:hover:before {
      transform: scale(1);
      transition: 0s;
    }
  }
}

js部分

function setup() {
  let w = innerWidth, h = innerHeight,
    spanWidth = 40, count = Math.ceil(w / 40) * Math.ceil(h / spanWidth),
    frag = document.createDocumentFragment()
  for (let i = 0; i < count; i++) {
    frag.appendChild(document.createElement('span'))
  }
  document.querySelector('.container').appendChild(frag)
}

setup()

主要有几个关键点在于css编写处

1. span不缩小，缩小的是span的:before伪元素，这样鼠标hover span的时候，可以hover的有效面积还是40*40 而不会缩小

2. 光点的生成在于box-shadow多组value叠加的效果

3. transition 2s 设置在 span普通状态，transition 0s 设置在span:hover状态

4. 通过给容器元素添加动画，动画里通过 filter:hue-rotate(xxxdeg)来轮换背景色

如果code后发现鼠标滑动时效果不灵敏，很有可能就是 1，3 出现了问题