css木纹多款背景效果-html代码-BFW代码库

css木纹多款背景效果

代码语言：html

所属分类：背景

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


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  --h: 19em;
  display: grid;
  grid-template-columns: repeat(var(--n, 7), var(--w, 13em));
  grid-gap: 1em;
  place-content: center;
  margin: 0;
  min-height: 100vh;
  background: #333;
}
@media (max-width: 99em) {
  body {
    --n: 6 ;
  }
}
@media (max-width: 85em) {
  body {
    --n: 5 ;
  }
}
@media (max-width: 71em) {
  body {
    --n: 4 ;
  }
}
@media (max-width: 57em) {
  body {
    --n: 3 ;
  }
}
@media (max-width: 43em) {
  body {
    --n: 2 ;
  }
}
@media (max-width: 29em) {
  body {
    --n: 1 ;
  }
}
@media (max-width: 15em) {
  body {
    --w: 100%;
    --h: 146.1538461538vw;
  }
}

.card {
  --rlist: var(--c) 0 3px, transparent 0 7px;
  --dim: 100% 50% no-repeat;
  --ang: 90deg;
  overflow: hidden;
  position: relative;
  height: var(--h);
  border-radius: 7px;
  box-shadow: 2px 2px 17px #000;
  background: repeating-linear-gradient(var(--ang-0, -45deg), var(--rlist)) var(--pos-0, 0 0)/var(--dim), repeating-linear-gradient(var(--ang-1, 45deg), var(--rlist)) var(--pos-1, 0 100%)/var(--dim), linear-gradient(var(--ang), var(--nlist));
}
.card:nth-child(4n + 2) {
  --ang-0: 45deg;
  --ang-1: 135deg;
}
.card:nth-child(4n + 3) {
  --ang-0: -60deg;
  --ang-1: 60deg;
}
.card:nth-child(4n) {
  --ang-0: -120deg;
  --ang-1: 120deg;
}
.card:nth-child(1) {
  --c: #3ea814;
  --nlist: #e8f4c6, #3bb720;
}
.card:nth-child(2) {
  --c: #5d6f80;
  --nlist: #768896, #cbd4d6;
}
.card:nth-child(3) {
  --c: #fe3a01;
  --nlist: #fe3502, #efd25d;
}
.card:nth-child(4) {
  --c: #14282d;
  --nlist: #81b7c9, #26353c;
}
.card:nth-child(5) {
  --c: #0e685e;
  --nlist: #77dddd, #1e766a;
}
.card:nth-child(6) {
  --c: #dd7519;
  --nlist: #e68323, #fcdf85;
}
.card:nth-child(7) {
  --c: #034077;
  --nlist: #013579, #3fdbe5;
}
.card:nth-child(8) {
  --c: #05131f;
  --nlist: #2c6f90, #0e1f29;
}
.card:nth-child(9) {
  --c: #b63e03;
  --nlist: #ebd346, #c2400c;
}
.card:nth-child(10) {
  --c: #010e05;
  --nlist: #051e18, #186d56;
}
.card:nth-child(11) {
  --c: #093658;
  --nlist: #193961, #72cadd;
}
.card:nth-child(12) {
  --c: #011422;
  --nlist: #027899, #05262d;
}
.card:nth-child(13) {
  --c: #e0aa0a;
  --nlist: #fcef34, #dead1f;
}
.card:nth-child(14) {
  --c: #13507e;
  --nlist: #235790, #7fc8d3;
}
.card:nth-child(15) {
  --c: #326f12;
  .........完整代码请登录后点击上方下载按钮下载查看