网格项目共享背景

下载代码

html

css

分享到微信朋友圈

html

<div class="grid">
  <div class="item-1">
    <span>Lighting</span>
    <span class="shop"></span>
    <div class="overlay"></div>
  </div>
  <div class="alt">
    <span>Art & Decor</span>
    <span class="shop"></span>
    <div class="overlay"></div>
  </div>
  <div class="item-1">
    <span>Storage</span>
    <span class="shop"></span>
    <div class="overlay"></div>
  </div>
  <div class="item-1">
    <span>Flooring</span>
    <span class="shop"></span>
    <div class="overlay"></div>
  </div>
  <div class="item-1">
    <span>CSS Grid Tricks</span>
    <span class="shop"></span>
    <div class="overlay"></div>
  </div>
  <div class="alt">
    <span>Furniture</span>
    <span class="shop"></span>
    <div class="overlay"></div>
  </div>
  <div class="alt">
    <span>Entertainment</span>
    <span class="shop"></span>
    <div class="overlay"></div>
  </div>
  <div class="">
    <span>Accessories</span>
    <span class="shop"></span>
    <div class="overlay"></div>
  </div>
  <div class="alt">
    <span>Tables</span>
    <span class="shop"></span>
    <div class="overlay"></div>
  </div>
  <div class="item-1 alt">
    <span>Rugs</span>
    <span class="shop"></span>
    <div class="overlay"></div>
  </div>
</div>

css

* {
  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("https://images.unsplash.com/photo-1586023492125-27b2c045efd7?crop=entropy&cs=srgb&fm=jpg&ixid=MnwxNDU4OXwwfDF8cmFuZG9tfHx8fHx8fHx8MTY0MDA0NjcyNw&ixlib=rb-1.2.1&q=85");
  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-bottom: 0;
}
.grid > div:nth-of-type(1) {
  grid-column: 1/3;
}
.grid > div:nth-of-type(2) {
  grid-column: 3/5;
  grid-row: 1/3;
}
.grid > div:nth-of-type(4) {
  grid-column: 2/3;
  grid-row: 2/5;
}

@media screen and (max-width: 840px) {
  .grid {
    height: auto;
    grid-template-columns: repeat(2, 1fr);
  }
  .grid div {
    min-height: auto;
    aspect-ratio: 1/1;
    width: 100%;
  }
  .grid > div:nth-of-type(1) {
    grid-column: auto;
  }
  .grid > div:nth-of-type(2) {
    grid-column: auto;
    grid-row: auto;
  }
  .grid > div:nth-of-type(4) {
    grid-column: auto;
    grid-row: auto;
  }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg