CSS
语言:
CSSSCSS
确定
$theme-c: #95a;
.diagram {
--dif: calc(var(--in0) - var(--in1));
--xor: calc(var(--dif)*var(--dif));
--notxor: calc(1 - var(--xor));
display: grid;
grid-gap: 1em;
grid-template: #{2em 2em}/ #{5em 5em 2em};
grid-auto-flow: column;
place-content: center;
font: 2em/ 1.25 ubuntu mono, consolas, monaco, monospace;
}
input, label { grid-column: 1 }
input {
position: absolute;
opacity: 0;
&:checked + * { --on: 1 }
}
label {
--on: 0;
--notin: calc(1 - var(--in));
position: relative;
place-self: center;
width: 2em; height: 1em;
background:
linear-gradient($theme-c, $theme-c) calc(var(--on)*100%)/ 1em no-repeat
#ccc;
transition: .35s ease-out;
&::before, &::after {
--i: 0;
--noti: calc(1 - var(--i));
--res: calc(var(--i)*var(--notin) + var(--noti)*var(--in));
display: grid;
place-content: center;
position: absolute;
left: calc(var(--i)*100%);
width: 1em; height: 1em;
transform: translate(calc(var(--noti)*-100%));
color: $theme-c;
filter: Grayscale(var(--res)) Brightness(calc(1 + var(--res)));
font: 1em, ubuntu mono, consolas, monaco, monospace;
transition: inherit;
counter-reset: i var(--i);
content: counter(i)
}
&::after { --i: 1 }
}
.box, output { grid-row: 1/ span 2 }
.box {
display: grid;
place-content: center;
position: relative;
width: 5em; height: 5em;
box-shadow: inset 0 0 0 2px;
&::before, &::after {
position: absolute;
width: 1em;
content: ''
}
&::before {
top: calc(1em - 2px); right: 100%;
border: solid 0 #000;
border-width: 4px 0;
height: calc(3em - 4px)
}
&::after {
top: calc(2.5em - 2px); left: 100%;
height: 4px;
background: #000;
}
}
output {
place-self: center;
width: 1.25em;
border-radius: 5px;
box-shadow: 0 0 0 2px currentcolor;
color: #f90;
text-align: center;
&::after {
counter-reset: xor var(--xor);
content: counter(xor)
}
}