css实现blend各种混合模式集合代码-html代码-BFW代码库

代码语言：html
代码描述：css实现blend各种混合模式集合代码，上面可调整前景色与背景色及透明度，下面是各种混合模式的效果。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
<style>
:root {
  --color-00: #fafafa;
  --color-10: #7188a8;
  --color-20: color-mix(in srgb, #394351, black);
  --color-30: #14161b;
  --color-bg: var(--color-00);
  --color-fg: var(--color-30);
  @media (prefers-color-scheme: dark) {
    --color-bg: var(--color-20);
    --color-fg: var(--color-00);
  }
}

.group {
  width: 100%;
  min-width: 120px;
  aspect-ratio: 1/1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 25%;

  div {
    position: absolute;
    width: 50%;
    height: 50%;
    border-radius: calc(1px * infinity);
    overflow: hidden;
    mix-blend-mode: var(--blend-mode);
    background-color: var(--bg);
    transition: opacity 250ms ease-in-out;
    opacity: var(--opacity, 1);
  }

  div:nth-of-type(1) {
    transform: translate(-25%, -25%);
  }
  div:nth-of-type(2) {
    transform: translate(25%, -25%);
  }
  div:nth-of-type(3) {
    transform: translate(0, 25%);
  }

  p {
    position: absolute;
    z-index: 10;
    bottom: 2px;
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    .light & {
      color: black;
    }
    .dark & {
      color: white;
    }
  }
}

.dark,
.light {
  transition: background 250ms ease-in-out;
}
.dark {
  background: var(--bg-dark, black);
}

.light {
  background: var(--bg-light, white);
}

body {
  min-height: 100svh;
  font-family: Seravek, "Gill Sans Nova", Ubuntu, Calibri, "DejaVu Sans",
    source-sans-pro, sans-serif;
  margin: 0 auto;
  max-width: min-content;
  padding: 2rem 4rem;
  padding-bottom: 4rem;
  color: var(--color-fg);
  background: linear-gradient(
    in lab to top,
    color-mix(in srgb, var(--color-bg), var(--color-fg) 5%),
    var(--color-bg)
  );
  background-attachment: fixed;

  @media (prefers-color-scheme: dark) {
    background: linear-gradient(
      in lab to top,
      color-mix(in srgb, var(--color-bg), black 50%),
      var(--color-bg)
    );
  }
}

@keyframes wiggle-up {
  to {
    translate: 0 0.25em;
  }
}

@keyframes wiggle-down {
  to {
    translate: 0 -0.25em;
  }
}

h1 {
  font-size: 2rem;
  font-weight: 800;
  text-align: center;
  text-transform: uppercase;
  margin: 2rem;
  display: flex;
  gap: 1rem;
  text-shadow: 2px 2px 4px hsl(180 90% 10%);
  justify-content: center;

  span {
    position: relative;
    color: rgb(255 0 0);

    &,
    &::before,
    &::after {
      mix-blend-mode: screen;
    }

    &::after,
    &::before {
      display: block;
      content: attr(data-word);
      position: absolute;
    }

    &::before {
      color: rgb(0 255 0);
      top: -4px;
      animation: wiggle-up 2s ease-in-out alternate infinite;
    }
    &::after {
      color: rgb(0 0 255);
      top: 4px;
      animation: wiggle-down 2s 500ms ease-in-out alternate infinite;
    }

    &:nth-of-type(1)::before {
      rotate: -4deg;
      animation-delay: 3s;
    }
    &:nth-of-type(1)::after {
      rotate: 4deg;
      animation-delay: 2s;
    }
    &:nth-of-type(3)::before {
      rotate: 2deg;
      animation-delay: 2s;
    }
    &:nth-of-type(3)::after {
      rotate: -2deg;
    }
  }
}

ul {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 50px;
  justify-content: center;
}

li {
  display: grid;
  margin: 0 auto;
  grid-template-areas:
    "title title title title"
    "white-rgb white-cmy black-rgb black-cmy";

  gap: 25px;
  max-width: 640px;

  h2 {
    grid-area: title;
    font-family: monospace;
  }

  .black > :nth-of-type(1) {
    grid-area: black-rgb;
  }
  .black > :nth-of-type(2) {
    grid-area: black-cmy;
  }
  .white > :nth-of-type(1) {
    grid-area: white-rgb;
  }
  .white > :nth-of-type(2) {
    grid-area: white-cmy;
  }
}

.group,
details {
  border: 2px solid color-mix(in srgb, var(--color-10), white 90%);
  box-shadow: 0 15px 10px -10px rgb(255 255 255 / 80%),
    0 10px color-mix(in srgb, var(--color-10), hsl(180 10% 90%) 80%),
    0 12px 8px hsl(180 10% 60%), inset 0 1px 2px hsl(180 10% 70%);

  @media (prefers-color-scheme: dark) {
    border: 2px solid color-mix(in srgb, var(--color-bg), #7188a8 10%);
    box-shadow: 0 10px 10px -10px hsl(180 5% 90% / 50%),
      0 10px color-mix(in srgb, var(--color-30), hsl(180 20% 20%) 80%),
      0 12px 8px hsl(180 10% 5%), inset 0 2px 2px hsl(180 10% 30%);
  }
}

details {
  margin: 4rem auto;
  background: linear-gradient(
    in lab,
    color-mix(in srgb, var(--color-bg), var(--color-fg) 10%),
    var(--color-bg)
  );
  color: var(--color-fg);
  mix-blend-mode: lighten;
  border-radius: 20px;
  padding: 1rem;
  box-sizing: border-box;

  summary {
    margin: -1rem;
    padding: 1rem;
  }

  form {
    margin: 1rem;
    padding: 1rem;
    display: flex;
    border-radius: 10px;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 2rem;
    border: 1px solid color-mix(in srgb, var(--color-bg), white 10%);
    background: linear-gradient(
      in lab to top,
      var(--color-bg),
      color-mix(in srgb, var(--color-bg), hsl(180 90% 10%) 10%)
    );
    box-shadow: 0px 1px 3px inset hsl(180 20% 40%);

    @media (prefers-color-scheme: dark) {
      border: 1px solid color-mix(in srgb, var(--color-bg), black 40%);
      background-color: color-mix(in srgb, var(--color-bg), black 2%);
    }

    div {
      display: flex;
      gap: 1rem;
      align-items: center;
      justify-content: space-between;
      min-width: 150px;
    }
  }
}
</style>


  
</head>

<body translate="no">
  <h1>
  <span data-word="Blend">Blend </span><span data-word="Mode">Mode </span><span data-word="Overview">Overview </span>
</h1>
<summary>Preferences</summary>
  <form>
    <div>
      <label for="bg-light">BG Light</label><input id="bg-light" type="color" value="#FFFFFF" />
    </div>
    <div>
      <label for="bg-dark">BG Dark</label><input id="bg-dark" type="color" value="#000000" />
    </div>
    <div>
      <label for="opacity">Opacity</label><input id="opacity" max="1" min="0" step="0.01" type="range" value="1" />
    </div>
  </form>

<ul>
  <li>
    <h2>
      <code>multiply</code>
    </h2>
    <div class="group light" style="--blend-mode: multiply">
      <p>
        rgb
      </p>
      <div style="--bg: rgb(255, 0, 0)"></div>
      <div style="--bg: rgb(0, 255, 0)"></div>
      <div style="--bg: rgb(0, 0, 255)"></div>
    </div>
    <div class="group light" style="--blend-mode: multiply;">
      <p>
        cmy
      </p>
      <div style="--bg: rgb(255, 255, 0)"></div>
      <div style="--bg: rgb(0, 255, 255)"></div>
      <div style="--bg: rgb(255, 0, 255)"></div>
    </div>
    <div class="group dark" style="--blend-mode: multiply">
      <p>
        rgb
      </p>
      <div style="--bg: rgb(255, 0, 0)"></div>
      <div style="--bg: rgb(0, 255, 0)"></div>
      <div style="--bg: rgb(0, 0, 255)"></div>
    </div>
    <div class="group dark" style="--blend-mode: multiply;">
      <p>
        cmy
      </p>
      <div style="--bg: rgb(255, 255, 0)"></div>
      <div style="--bg: rgb(0, 255, 255)"></div>
      <div style="--bg: rgb(255, 0, 255)"></div>
    </div>
  </li>
  <li>
    <h2>
      <code>screen</code>
    </h2>
    <div class="group light" style="--blend-mode: screen">
      <p>
        rgb
      </p>
      <div style="--bg: rgb(255, 0, 0)"></div>
      <div style="--bg: rgb(0, 255, 0)"></div>
      <div style="--bg: rgb(0, 0, 255)"></div>
    </div>
    <div class="group light" style="--blend-mode: screen;">
      <p>
        cmy
      </p>
      <div style="--bg: rgb(255, 255, 0)"></div>
      <div style="--bg: rgb(0, 255, 255)"></div>
      <div style="--bg: rgb(255, 0, 255)"></div>
    </div>
    <div class="group dark" style="--blend-mode: screen">
      <p>
        rgb
      </p>
      <div style="--bg: rgb(255, 0, 0)"></div>
      <div style="--bg: rgb(0, 255, 0)"></div>
      <div style="--bg: rgb(0, 0, 255)"></div>
    </div>
    <div class="group dark" style="--blend-mode: screen;">
      <p>
        cmy
      </p>
      <div style="--bg: rgb(255, 255, 0)"></div>
      <div style="--bg: rgb(0, 255, 255)"></div>
      <div style="--bg: rgb(255, 0, 255)"></div>
    </div>
  </li>
  <li>
    <h2>
      <code>overlay</code>
    </h2>
    <div class="group light" style="--blend-mode: overlay">
      <p>
        rgb
      </p>
      <div style="--bg: rgb(255, 0, 0)"></div>
      <div style="--bg: rgb(0, 255, 0)"></div>
      <div style="--bg: rgb(0, 0, 255)"></div>
    </div>
    <div class="group light" style="--blend-mode: overlay;">
      <p>
        cmy
      </p>
      <div style="--bg: rgb(255, 255, 0)"></div>
      <div style="--bg: rgb(0, 255, 255)"></div>
      <div style="--bg: rgb(255, 0, 255)"></div>
    </div>
    <div class="group dark" style="--blend-mode: overlay">
      <p>
        rgb
      </p>
      <div style="--bg: rgb(255, 0, 0)"></div>
      <div style="--bg: rgb(0, 255, 0)"></div>
      <div style="--bg: rgb(0, 0, 255)"></div>
    </div>
    <div class="group dark" style="--blend-mode: overlay;">
      <p>
        cmy
      </p>
      <div style="--bg: rgb(255, 255, 0)"></div>
      <div style="--bg: rgb(0, 255, 255)"></div>
      <div style="--bg: rgb(255, 0, 255)"></div>
    </div>
  </li>
  <li>
    <h2>
      <code>darken</code>
    </h2>
    <div class="group light" style="--blend-mode: darken">
      <p>
        rgb
      </p>
      <div style="--bg: rgb(255, 0, 0)"></div>
      <div style="--bg: rgb(0, 255, 0)"></div>
      <div style="--bg: rgb(0, 0, 255)"></div>
    </div>
    <div class="group light" style="--blend-mode: darken;">
      <p>
        cmy
      </p>
      <div style="--bg: rgb(255, 255, 0)"></div>
      <div style="--bg: rgb(0, 255, 255)"></div>
      <div style="--bg: rgb(255, 0, 255)"></div>
    </div>
    <div class="group dark" style="--blend-mode: darken">
      <p>
        rgb
      </p>
      <div style="--bg: rgb(255, 0, 0)"></div>
      <div style="--bg: rgb(0, 255, 0)"></div>
      <div style="--bg: rgb(0, 0, 255)"></div>
    </div>
    <div class="group dark" style="--blend-mode: darken;">
      <p>
        cmy
      </p>
      <div style="--bg: rgb(255, 255, 0)"></div>
      <div style="--bg: rgb(0, 255, 255)"></div>
      <div style="--bg: rgb(255, 0, 255)"></div>
    </div>
  </li>
  <li>
    <h2>
      <code>lighten</code>
    </h2>
    <div class="group light" style="--blend-mode: lighten">
      <p>
        rgb
      </p>
      <div style="--bg: rgb(255, 0, 0)"></div>
      <div style="--bg: rgb(0, 255, 0)"></div>
      <div style="--bg: rgb(0, 0, 255)"></div>
    </div>
    <div class="group light" style="--blend-mode: lighten;">
      <p>
        cmy
      </p>
      <div style="--bg: rgb(255, 255, 0)"></div>
      <div style="--bg: rgb(0, 255, 255)"></div>
      <div style="--bg: rgb(255, 0, 255)"></div>
    </div>
    <div class="group dark" style="--blend-mode: lighten">
      <p>
        rgb
      </p>
      <div style="--bg: rgb(255, 0, 0)"></div>
      <div style="--bg: rgb(0, 255, 0)"></div>
      <div style="--bg: rgb(0, 0, 255)"></div>
    </div>
    <div class="group dark" style="--blend-mode: lighten;">
      <p>
        cmy
      </p>
      <div style="--bg: rgb(255, 255, 0)"></div>
      <div style="--bg: rgb(0, 255, 255)"></div>
      <div style="--bg: rgb(255, 0, 255)"></div>
    </div>
  </li>
  <li>
    <h2>
      <code>color-dodge</code>
    </h2>
    <div class="group light" style="--blend-mode: color-dodge">
      <p>
        rgb
      </p>
      <div style="--bg: rgb(255, 0, 0)"></div>
      <div style="--bg: rgb(0, 255, 0)"></div>
      <div style="--bg: rgb(0, 0, 255)"></div>
    </div>
    <div class="group light" style="--blend-mode: color-dodge;">
      <p>
        cmy
      </p>
      <div style="--bg: rgb(255, 255, 0)"></div>
      <div style="--bg: rgb(0, 255, 255)"></div>
      <div style="--bg: rgb(255, 0, 255)"></div>
    </div>
    <div class="group dark" style="--blend-mode: color-dodge">
      <p>
        rgb
      </p>
      <div style="--bg: rgb(255, 0, 0)"></div>
      <div style="--bg: rgb(0, 255, 0)"></div>
      <div style="--bg: rgb(0, 0, 255)"></div>
    </div>
    <div class="group dark" style="--blend-mode: color-dodge;">
      <p>
        cmy
      </p>
      <div style="--bg: rgb(255, 255, 0)"></div>
      <div style="--bg: rgb(0, 255, 255)"></div>
      <div style="--bg: rgb(255, 0, 255)"></div>
    </div>
  </li>
  <li>
    <h2>
      <code>color-burn</code>
    </h2>
    <div class="group light" style="--blend-mode: color-burn">
      <p>
        rgb
      </p>
      <div style="--bg: rgb(255, 0, 0)"></div>
      <div style="--bg: rgb(0, 255, 0)"></div>
      <div style="--bg: rgb(0, 0, 255)"></div>
    </div>
    <div class="group light" style="--blend-mode: color-burn;">
      <p>
        cmy
      </p>
      <div style="--bg: rgb(255, 255, 0)"></div>
      <div style="--bg: rgb(0, 255, 255)"></div>
      <div style="--bg: rgb(255, 0, 255)"></div>
    </div>
    <div class="group dark" style="--blend-mode: color-burn">
      <p>
        rgb
      </p>
      <div style="--bg: rgb(255, 0, 0)"></div>
      <div style="--bg: rgb(0, 255, 0)"></div>
      <div style="--bg: rgb(0, 0, 255)"></div>
    </div>
    <div class="group dark" style="--blend-mode: color-burn;">
      <p>
        cmy
      </p>
      <div style="--bg: rgb(255, 255, 0)"></div>
      <div style="--bg: rgb(0, 255, 255)"></div>
      <div style=".........完整代码请登录后点击上方下载按钮下载查看