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