CSS+HTML<网格背景效果>

作者: 誰在花里胡哨 | 来源:发表于2021-01-21 18:02 被阅读0次

CSS+HTML<网格背景效果>
CSS+HTML<循环滚动背景效果>
CSS中条纹效果的实现方案
CSS实现垂直居中的方法
Anime+Vue<简单的雨滴打窗效果>
CSS+HTML<网格布局grid>
【CSS】网格背景
css网格背景
css 网格背景
day03

image.png
知识点：
这里涉及的知识点其实很少，只要需要你去理解具体含义
其中包括 background: linear-gradient(),background-size,background-repeat
没错，只要你掌握了以上 3 点就能实现这种效果！！！

下面会告诉大家如何具体实现此效果，其中虚线部分的绘制比较麻烦，但是也是可以实现，所以接下来会一一讲解~~

实线网格绘制：

<!-- html部分 -->
 <div class="grid-shi"></div>

   .grid-shi{
     height: 100vh;
     background: linear-gradient(to right,#ccc 50px,transparent 50px);
   }

这个你应该看得懂，稍微会点css都知道，此时背景就是一个往右50px为灰色的背景图片，因为之后的为transparent所以50px之后都是透明色，也就是啥都木得

image.png

   .grid-shi{
     height: 100vh;
     background: linear-gradient(to right,#ccc 50px,transparent 50px);
     background-repeat: no-repeat;/* 默认为 repeat */
     background-size: 100px 100px;
   }

这里的background-size: 100px 100px;相当于把背景放到一个100*100的容器里面，因为background-repeat默认为 repeat ，所以我这里设置了 no-repeat方便理解，那如果不加又会是什么样呢？

image.png

background-repeat: repeat;
background-size: 100px 100px;

页面就会变成很多个100*100的小模块，而每个小模块里面，都会有一个50px灰-透明的背景,当然这是从左往右的设置，如果再加上一个从上往下的设置呢?

image.png

 .grid-shi{
     height: 100vh;
     background: 
     linear-gradient(to right,#ccc 50px,transparent 50px),
     linear-gradient(to bottom,#ccc 50px,transparent 50px);
     background-repeat: repeat;/* 默认为 repeat */
     background-size: 100px 100px;
   }

这样看起来不就实现了网格的样子。
当然，现在还是有点粗的，那么你背景设细一点，模块分小一点

image.png

     linear-gradient(to right,#ccc 1px,transparent 1px),
     linear-gradient(to bottom,#ccc 1px,transparent 1px);
     background-repeat: repeat;/* 默认为 repeat */
     background-size: 10px 10px;

这样就实现了你最终要的效果了!!

image.png

虚线网格绘制：

 <div class="grid-xu"></div>

知道了实线怎么绘制后，你可能会想虚线怎么搞。反正我也是琢磨了好久，虽然有些复杂，不过还是实现了。
这里我就大致讲下原理，具体理解，建议你还是直接到最下面看代码吧!!
::before ::after的使用
这里我先设置一个背景色 红色，注意：是红色

   .grid-xu::before{
     background: linear-gradient(to right,white 25px,transparent 25px),
     linear-gradient(to bottom,blue 25px,transparent 25px);
     background-size: 50px 200px;
   }

   .grid-xu::after{
     background: linear-gradient(to bottom,white 25px,transparent 25px),
     linear-gradient(to right,blue 25px,transparent 25px);
     background-size: 200px 50px;
   }

左::before,右::after

image.png
接下来把红色背景色改成和white一样的白色,不就成了虚线的模样了，然后接下来需要的是把他们2个叠加到一起，给个透明度，就得到效果了。
可能你还会不太明白，那么就动起小手手，自己摸索摸索吧～～

这里的问题就是，背景色必须要和你设置形成虚线起始色值一直，这里用的 white 来实现虚线，那么背景色就必须是白色！！ 而且如果想实现叠加，就一定别忘记设置透明度，不然只会被::after那层覆盖掉～

image.png

点点背景:
这里把渐变修改为径向渐变就实现点点背景了，原理和前面说的都是一样的

 background: radial-gradient(circle , #5a5a5a .5px, transparent .5px);
 background-size: 10px 10px;

image.png
若想实现图片和背景的融合，可以直接通过 mix-blend-mode: difference; 去实现

image.png

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    :root{
      --gridSizeXu:20px; /* 虚线网格大小 */
      --gridSizeShi:60px; /* 虚线网格大小 */
      --gridColor:#5f5f5f; /* 线条颜色 */
    }
    body{
      height: 100vh;
      margin: 0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    /* 虚线部分 */
   .grid-xu{
     overflow: hidden;
     width: 100%;
     height: 100%;
     position: fixed;
     z-index: -2;
     transform: scale(1.1);
   }
   .grid-xu::before, .grid-xu::after{
     opacity: .5;
     content: '';
     background-repeat: repeat;
     position: absolute;
     width: 100%;
     height: 100%;
     left: 0;
     top: 0;
   }
   .grid-xu::before{
     /* 从左往右 */
     background: linear-gradient(to right,white 1px,transparent 1px),
     linear-gradient(to bottom,var(--gridColor) .5px,transparent .5px);
     background-size: 3px var(--gridSizeXu);
   }
   .grid-xu::after{
     /* 从上往下 */
     background: 
     linear-gradient(to bottom,white 1px,transparent 1px),
     linear-gradient(to right,var(--gridColor) .5px,transparent .5px);
     background-size: var(--gridSizeXu) 3px;
   }
   /* 实线条部分 */
   .grid-shi{
    overflow: hidden;
     width: 100%;
     height: 100%;
     position: fixed;
     z-index: -1;
     transform: scale(1.1);
     background: linear-gradient(to right,var(--gridColor) .5px,transparent .5px),
     linear-gradient(to bottom,var(--gridColor) .5px,transparent .5px);
     background-size: var(--gridSizeShi) var(--gridSizeShi);
     background-repeat: repeat;
   }
   .content{
     text-align: center;
   }
   .content h1{
    font-weight: 300;
    letter-spacing: .7rem;
    margin: 0;
   }
   .content p{
     font-size: 14px;
    font-weight: 200;
    text-transform: uppercase;
    letter-spacing: .1rem;
    text-decoration: line-through;
    color: #5a5a5a;
   }
  </style>
</head>
<body>
 <div class="grid-xu"></div>
 <div class="grid-shi"></div>
 <div class="content">
   <h1>网格背景</h1>
   <p>The grid background</p>
 </div>
</body>
</html>