html5元件的作用,html5版本的可交互异或电子元器件

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)

}

}