用一個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>

查看專欄詳情 立即解鎖全部專欄