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

文章目录

如何利用css绘制水平垂直直线组成网格
如何形成流动网格效果
如何平面流动网格图看起来像个背景效果
完整代码

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

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

 .gridwidth 100vwheight 100vhbackground-image -webkit-linear-gradient(top, transparent 150px,rgb(66,79,255) 153px)background-size 100% 153pxbackground-position 50% 50%

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

 .gridwidth 100vwheight 100vhbackground-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 153pxbackground-position 50% 50%

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

如何形成流动网格效果

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

.grid::aftercontent: ''display: inline-blockheight: inheritfilter: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::aftercontent: ''display: inline-blockheight: inheritfilter: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 153pxanimation: clipMe 8s linear infinite@keyframes clipMe {0%,100%{height:1pxwidth: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是相对于父元素

  .gridposition absolute;left 50%;top 50%;margin -100vmax;width 200vmax;height 200vmax;transform-style preserve-3dtransform: 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 153pxbackground-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">
.fontSziefont-size 16px
.boxposition relative;overflow hidden;margin 0;background rgb(5,11,59);height 100vh;perspective 65em;perspective-origin 50% calc(50%-24em).gridposition absolute;left 50%;top 50%;margin -100vmax;width 200vmax;height 200vmax;transform-style preserve-3dtransform: 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 153pxbackground-position 50% 50%.grid::aftercontent: ''display: inline-blockheight: inheritfilter: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 153pxanimation: clipMe 8s linear infinite@keyframes clipMe {0%,100%{height:1pxwidth: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>