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

代码语言:html

所属分类:布局界面

代码描述:css实现blend各种混合模式集合代码,上面可调整前景色与背景色及透明度,下面是各种混合模式的效果。

代码标签: 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)&q.........完整代码请登录后点击上方下载按钮下载查看

网友评论0