用一个div绘制背景流动网格特效

如何利用css绘制水平垂直直线组成网格

利用css3llinear-gradient、background-size
原理剖析：
利用css3渐变属性llinear-gradient来绘制横纵直线

 .grid
 	width 100vw
 	height 100vh
    background-image -webkit-linear-gradient(top, 
    	transparent 150px,rgb(66,79,255) 153px)
    background-size 100% 153px
    background-position 50% 50%

这里利用渐变前150px为透明(举例子)后3px为蓝色并通过设置background-size指定背景图片(渐变也是个图片)的大小水平限制设置为 100%（也就是不限制），垂直方向限制成只显示 153px 的范围。这样就会漏出 3 像素的蓝色，看上去就成了一条线了。
依个葫芦画个瓢再加个垂直的竖线，就绘制成网格效果了，完整代码如下图所示

 .grid
   	width 100vw
 	height 100vh
    background-image 
    	-webkit-linear-gradient(top, transparent 150px, rgb(66,79,255) 153px),
    	-webkit-linear-gradient(left, transparent 150px, rgb(66,79,255) 153px)
    background-size 153px 153px
    background-position 50% 50%

通过改变渐变颜色及宽度，也可以做成格式桌布效果，这是我在上边网格之上调整的效果，知道原理自行调整即可。

如何形成流动网格效果

这里运用的技术与之前绘制网格的是一样的一样是利用css3,linear-gradient与background-size形成流动网格线的绘制，需要注意的是这里我们利用伪元素来进行流动网格线的绘制。这里我们利用伪元素在网格线之上又叠加了一层网格线。

.grid::after
    content: ''
    display: inline-block
    height: inherit
    filter:blur(5px)
    background: 
    -webkit-linear-gradient(top, transparent 150px, rgb(111,230,244) 153px),
    -webkit-linear-gradient(left, transparent 150px, rgb(84,104,254) 153px)
    background-size: 153px 153px

下一步就是让网格线动起来，形成流动效果这里运用css3动画annimation来实现效果

 .grid::after
    content: ''
    display: inline-block
    height: inherit
    filter:blur(5px)
    background: -webkit-linear-gradient(top, transparent 150px, rgb(111,230,244) 153px),-webkit-linear-gradient(left, transparent 150px, rgb(84,104,254) 153px)
    background-size: 153px 153px
    animation: clipMe 8s linear infinite

  @keyframes clipMe {
    0%,100%{
      height:1px
      width:1px
    }
    25%{
      height: calc(100%*1/5)
      width: calc(100%*1/5)
    }
    50%{
      height: calc(100%*2/4)
      width: calc(100%*2/4)
    }
    75%{
      height: calc(100%*4/5)
      width: calc(100%*4/5)
    }
    100%{
      height: 100%
      width: 100%
    }

效果如图所示：

这里还可以通过调整背景图位置,来形成其它一些好玩的效果

如何平面流动网格图看起来像个背景效果

这里要用到css的3d效果，把平面图沿着x轴向里旋转，然后通过调整视点等形成背景效果。这里重要的一点是需要把网格背景适当放大，这里是放大了两倍，把中心点转换到视口正中，这样形成的背景图，才会有收缩的感觉，而不产生偏转。

em是相对长度单位，相对于px来说，px是固定的像素而em是相对于父元素

  .grid
    position absolute;
    left 50%;
    top 50%;
    margin -100vmax;
    width 200vmax;
    height 200vmax;
    transform-style preserve-3d
    transform: rotateX(80deg) translateZ(-10em)
    background-image -webkit-linear-gradient(top, transparent 150px, rgb(66,79,255) 153px),-webkit-linear-gradient(left, transparent 150px, rgb(84,104,254) 153px)
    background-size 153px 153px
    background-position 50% 50%

产生偏转的网格效果

放大两倍后的网格效果

完整代码

<template lang="pug">
  div.fontSzie
    .box
      .grid
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
  components: {
  }
})
export default class FlowGrid extends Vue {}
</script>

<style scoped lang="stylus">
.fontSzie
  font-size 16px
.box
  position relative;
  overflow hidden;
  margin 0;
  background rgb(5,11,59);
  height 100vh;
  perspective 65em;
  perspective-origin 50% calc(50%-24em)
  .grid
    position absolute;
    left 50%;
    top 50%;
    margin -100vmax;
    width 200vmax;
    height 200vmax;
    transform-style preserve-3d
    transform: rotateX(80deg) translateZ(-10em)
    background-image -webkit-linear-gradient(top, transparent 150px, rgb(66,79,255) 153px),-webkit-linear-gradient(left, transparent 150px, rgb(84,104,254) 153px)
    background-size 153px 153px
    background-position 50% 50%
  .grid::after
    content: ''
    display: inline-block
    height: inherit
    filter:blur(5px)
    background: -webkit-linear-gradient(top, transparent 150px, rgb(111,230,244) 153px),-webkit-linear-gradient(left, transparent 150px, rgb(84,104,254) 153px)
    background-size: 153px 153px
    animation: clipMe 8s linear infinite

  @keyframes clipMe {
    0%,100%{
      height:1px
      width:1px
    }
    25%{
      height: calc(100%*1/5)
      width: calc(100%*1/5)
    }
    50%{
      height: calc(100%*2/4)
      width: calc(100%*2/4)
    }
    75%{
      height: calc(100%*4/5)
      width: calc(100%*4/5)
    }
    100%{
      height: 100%
      width: 100%
    }
  }
</style>