css实现网格切片背景布局效果代码-html代码-BFW代码库

css实现网格切片背景布局效果代码

代码语言：html

代码描述：css实现网格切片背景布局效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<html>

<head>
    <style>
        * {
          box-sizing: border-box;
        }
        
        :root {
          --gap: 8px;
        }
        
        body {
          margin: 0;
          font-family: system-ui;
        }
        
        .grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: var(--gap);
          padding: var(--gap);
          height: 100vh;
          position: relative;
          background: #080b11;
          display: -ms-grid;
          -ms-grid-columns: 1fr [4];
        }
        .grid div {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-end;
          padding: calc(var(--gap) * 1.5);
          min-height: 160px;
          color: #fff;
          font-size: 1.1rem;
          font-weight: 600;
          background-color: teal;
          background-image: url("//repo.bfw.wiki/bfwrepo/image/62902b3997a0f.png");
          background-attachment: fixed;
          background-size: cover;
          background-position: center;
          position: relative;
          cursor: pointer;
          overflow: hidden;
          transition-property: filter, backdrop-filter, opacity, color;
          transition-duration: 0.3s;
          transition-timing-function: ease-out;
          display: -webkit-box;
          display: -ms-flexbox;
          -webkit-box-orient: vertical;
          -webkit-box-direction: normal;
          -ms-flex-direction: column;
          -webkit-box-align: start;
          -ms-flex-align: start;
          -webkit-box-pack: end;
          -ms-flex-pack: end;
          -webkit-transition-property: opacity, color, -webkit-filter, -webkit-backdrop-filter;
          transition-property: opacity, color, -webkit-filter, -webkit-backdrop-filter;
          -webkit-transition-duration: 0.3s;
          -webkit-transition-timing-function: ease-out;
        }
        .grid div:hover {
          color: #fff;
        }
        .grid div span:first-of-type {
          z-index: 2;
        }
        .grid div .overlay {
          position: absolute;
          inset: 0;
          width: 100%;
          height: 100%;
          opacity: 0;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.8));
          backdrop-filter: blur(6px);
          transition-property: opacity;
          transition-duration: 0.4s;
          transition-timing-function: ease-out;
          z-index: -1;
          background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.8));
          -webkit-backdrop-filter: blur(6px);
          -webkit-transition-property: opacity;
          -webkit-transition-duration: 0.4s;
          -webkit-transition-timing-function: ease-out;
        }
        .grid div .shop {
          display: block;
          color: tomato;
          font-size: 0.8rem;
          font-weight: 400;
          margin-top: 8px;
          margin-bottom: -25px;
          opacity: 0;
          transition-property: margin-bottom, opacity;
          transition-duration: 0.3s;
          transition-timing-function: ethiopic-halehame-om-et;
          z-index: 2;
          -webkit-transition-property: margin-bottom, opacity;
          -webkit-transition-duration: 0.3s;
          -webkit-transition-timing-function: ethiopic-halehame-om-et;
        }
        .grid div:hover > .overlay {
          opacity: 1;
        }
        .grid div:hover {
          filter: brightness(1.2);
          -webkit-filter: brightness(1.2);
        }
        .grid div:hover > .shop {
          opacity: 1;
          margin-bo.........完整代码请登录后点击上方下载按钮下载查看