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

css实现blend各种混合模式集合代码

代码语言：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: wr.........完整代码请登录后点击上方下载按钮下载查看