css实现一个三维可运算的二进制计算器效果代码
代码语言:html
所属分类:其他
代码描述:css实现一个三维可运算的二进制计算器效果代码,点击数字可参与运算显示结果。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> :root { color-scheme: dark; font-size: min(1.4vw, 3.3vh); overflow: hidden; } body { font-family: sans-serif; background-color: black; color: white; perspective: 25em; perspective-origin: 50% calc(50% - 2em); margin: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 99vh; min-width: 99vw; } body * { transform-style: preserve-3d; } main { text-align: center; } section.info a { color: lightSkyBlue; } section.info .no-javascript { color: yellow; } footer { flex-grow: 1; flex-basis: 1; width: 100%; text-align: center; display: flex; align-items: flex-end; justify-content: center; } footer a { color: lightSkyBlue; text-decoration: none; } section.addition { counter-reset: first-number second-number sum-number 0; } section.addition table { font-size: inherit; color: white; background: transparent; display: block; width: 68rem; } section.addition table :is(thead, tbody) { display: block; } section.addition table thead, section.addition table tbody { display: block; } section.addition table tbody { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } section.addition table tr { display: block; color: white; background: transparent; } section.addition table tr td { padding: 0; } section.addition table tr td:nth-of-type(1) { width: 50rem; } section.addition table tr td:nth-of-type(2) { width: 8rem; } section.addition table tr td:nth-of-type(3) { width: 8rem; } section.addition table tr.numbers { height: 4em; } section.addition table tr.numbers td:first-of-type { transform: translateX(-1em) translateY(0) translateZ(-0.9em); } section.addition table tr.operators { height: 1em; } section.addition table tr td { display: inline-block; color: white; background: transparent; text-align: center; } section.addition :is(.operator, .number-display) { font-weight: bold; font-family: monospace; color: white; } section.addition :is(.operator, .number-display).decimal::before { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; } section.addition :is(.operator, .number-display).operator { transform: translateY(-0.5em); font-size: 2em; } section.addition :is(.operator, .number-display).number-display { width: 100%; height: 100%; } section.addition .decimal.first::before { content: counter(first-number); } section.addition .decimal.second::before { content: counter(second-number); } section.addition .decimal.sum::before { content: counter(sum-number); } section.addition input[type=checkbox] { position: absolute; z-index: -1; visibility: hidden; } section.addition :is(.result-display, .labels) { display: inline-flex; flex-wrap: wrap; gap: 1em; } section.addition :is(.result-display, .labels) .wrapper { display: inline-block; width: 2em; height: 2em; } section.addition :is(.result-display, .labels) .wrapper .cube { display: inline-block; --global-transform: rotateX(calc(var(--is-one) * 90deg)); width: 2em; height: 2em; color: black; font-weight: bold; font-family: monospace; padding: 1em; --is-one: 0; } section.addition :is(.result-display, .labels) .wrapper .cube .side { position: absolute; width: 2em; height: 2em; background: rgba(173, 216, 230, 0.6); box-shadow: 0 0 0.5em #000a inset; transition: transform 250ms ease-in-out; } section.addition :is(.result-display, .labels) .wrapper .cube .side::before { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; } section.addition :is(.result-display, .labels) .wrapper .cube .front { transform: var(--global-transform) translateZ(1em); } section.addition :is(.result-display, .labels) .wrapper .cube .front::before { content: "0"; } section.addition :is(.result-display, .labels) .wrapper .cube .right { transform: var(--global-transform) rotateY(90deg) translateZ(1em); } section.addition :is(.result-display, .labels) .wrapper .cube .back { transform: var(--global-transform) rotateY(180deg) translateZ(1em); } section.addition :is(.result-display, .labels) .wrapper .cube .left { transform: var(--global-transform) rotateY(-90deg) translateZ(1em); } section.addition :is(.result-display, .labels) .wrapper .cube .top { transform: var(--global-transform) translateY(-1em) rotateX(90deg); } section.addition :is(.result-display, .labels) .wrapper .cube .bottom { transform: var(--global-transform) translateY(1em) rotateX(90deg) rotateZ(180deg) rotateY(180deg); } section.addition :is(.result-display, .labels) .wrapper .cube .bottom::before { content: "1"; } section.addition :is(.result-display, .labels) .wrapper .placeholder .front::before { content: ""; } section.addition :is(.result-display, .labels) .wrapper .placeholder .bottom::before { content: ""; } section.addition .hexadecimal { --bit-0-is-one: 0; --bit-1-is-one: 0; --bit-2-is-one: 0; --bit-3-is-one: 0; --bit-4-is-one: 0; --bit-5-is-one: 0; --bit-6-is-one: 0; --bit-7-is-one: 0; --bit-8-is-one: 0; --bit-9-is-one: 0; --bit-10-is-one: 0; --bit-11-is-one: 0; --bit-12-is-one: 0; --bit-13-is-one: 0; --bit-14-is-one: 0; --bit-15-is-one: 0; display: flex; justify-content: center; align-items: center; } section.addition .hexadecimal.sum { --bit-0-is-one: var(--check-0-sum); } section.addition .hexadecimal.sum { --bit-1-is-one: var(--check-1-sum); } section.addition .hexadecimal.sum { --bit-2-is-one: var(--check-2-sum); } section.addition .hexadecimal.sum { --bit-3-is-one: var(--check-3-sum); } section.addition .hexadecimal.sum { --bit-4-is-one: var(--check-4-sum); } section.addition .hexadecimal.sum { --bit-5-is-one: var(--check-5-sum); } section.addition .hexadecimal.sum { --bit-6-is-one: var(--check-6-sum); } section.addition .hexadecimal.sum { --bit-7-is-one: var(--check-7-sum); } section.addition .hexadecimal.sum { --bit-8-is-one: var(--check-8-sum); } section.addition .hexadecimal.sum { --bit-9-is-one: var(--check-9-sum); } section.addition .hexadecimal.sum { --bit-10-is-one: var(--check-10-sum); } section.addition .hexadecimal.sum { --bit-11-is-one: var(--check-11-sum); } section.addition .hexadecimal.sum { --bit-12-is-one: var(--check-12-sum); } section.addition .hexadecimal.sum { --bit-13-is-one: var(--check-13-sum); } section.addition .hexadecimal.sum { --bit-14-is-one: var(--check-14-sum); } section.addition .hexadecimal.sum { --bit-15-is-one: var(--check-15-sum); } section.addition .hexadecimal.sum::before { counter-reset: highest-sum-bit var(--check-16-sum); content: counter(highest-sum-bit); position: absolute; display: flex; justify-content: center; align-items: center; inset: 0; transform: translateX(-2.5ch) translateY(0.2ch); } section.addition .hexadecimal .hex-digit { font-family: monospace; display: inline-block; height: 1em; width: 1ch; -webkit-clip-path: inset(0); clip-path: inset(0); } section.addition .hexadecimal .hex-digit .hex-chars { position: absolute; color: white; left: 0; transition: transform 0.3s; transform: translateY(calc(-2em * var(--hex-digit))); } section.addition .hexadecimal .hex-digit .hex-chars div { height: 2em; } section.addition .hexadecimal .digit-0 { --hex-digit: calc( var(--bit-0-is-one) * 1 + var(--bit-1-is-one) * 2 + var(--bit-2-is-one) * 4 + var(--bit-3-is-one) * 8 ); } section.addition .hexadecimal .digit-1 { --hex-digit: calc( var(--bit-4-is-one) * 1 + var(--bit-5-is-one) * 2 + var(--bit-6-is-one) * 4 + var(--bit-7-is-one) * 8 ); } section.addition .hexadecimal .digit-2 { --hex-digit: calc( var(--bit-8-is-one) * 1 + var(--bit-9-is-one) * 2 + var(--bit-10-is-one) * 4 + var(--bit-11-is-one) * 8 ); } section.addition .hexadecimal .digit-3 { --hex-digit: calc( var(--bit-12-is-one) * 1 + var(--bit-13-is-one) * 2 + var(--bit-14-is-one) * 4 + var(--bit-15-is-one) * 8 ); } section.addition input#check-first-0:checked ~ input#check-second-0:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-0-sum: 0; --check-0-carry: 1; } section.addition input#check-first-0:checked ~ input#check-second-0:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-0-sum: 1; --check-0-carry: 0; } section.addition input#check-first-0:not(:checked) ~ input#check-second-0:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-0-sum: 1; --check-0-carry: 0; } section.addition input#check-first-0:not(:checked) ~ input#check-second-0:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-0-sum: 0; --check-0-carry: 0; } section.addition input#check-first-0:checked { counter-increment: first-number 1 sum-number 1; } section.addition input#check-first-0:checked ~ table .first-labels label[for=check-first-0] { --is-one: 1; } section.addition input#check-first-0:checked ~ table .hexadecimal.first { --bit-0-is-one: 1; } section.addition input#check-second-0:checked { counter-increment: second-number 1 sum-number 1; } section.addition input#check-second-0:checked ~ table .second-labels label[for=check-second-0] { --is-one: 1; } section.addition input#check-second-0:checked ~ table .hexadecimal.second { --bit-0-is-one: 1; } section.addition :is(.result-display, .number-display.hexadecimal.sum) { --check-16-sum: var(--check-15-carry); } section.addition :is(.result-display, .number-display.hexadecimal.sum) .show-check.check-0 { --is-one: var(--check-0-sum); } section.addition input#check-first-1:checked ~ input#check-second-1:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-1-sum: calc(var(--check-0-carry)); --check-1-carry: 1; } section.addition input#check-first-1:checked ~ input#check-second-1:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-1-sum: calc(1 - var(--check-0-carry)); --check-1-carry: calc(var(--check-0-carry)); } section.addition input#check-first-1:not(:checked) ~ input#check-second-1:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-1-sum: calc(1 - var(--check-0-carry)); --check-1-carry: calc(var(--check-0-carry)); } section.addition input#check-first-1:not(:checked) ~ input#check-second-1:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-1-sum: calc(var(--check-0-carry)); --check-1-carry: 0; } section.addition input#check-first-1:checked { counter-increment: first-number 2 sum-number 2; } section.addition input#check-first-1:checked ~ table .first-labels label[for=check-first-1] { --is-one: 1; } section.addition input#check-first-1:checked ~ table .hexadecimal.first { --bit-1-is-one: 1; } section.addition input#check-second-1:checked { counter-increment: second-number 2 sum-number 2; } section.addition input#check-second-1:checked ~ table .second-labels label[for=check-second-1] { --is-one: 1; } section.addition input#check-second-1:checked ~ table .hexadecimal.second { --bit-1-is-one: 1; } section.addition :is(.result-display, .number-display.hexadecimal.sum) { --check-16-sum: var(--check-15-carry); } section.addition :is(.result-display, .number-display.hexadecimal.sum) .show-check.check-1 { --is-one: var(--check-1-sum); } section.addition input#check-first-2:checked ~ input#check-second-2:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-2-sum: calc(var(--check-1-carry)); --check-2-carry: 1; } section.addition input#check-first-2:checked ~ input#check-second-2:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-2-sum: calc(1 - var(--check-1-carry)); --check-2-carry: calc(var(--check-1-carry)); } section.addition input#check-first-2:not(:checked) ~ input#check-second-2:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-2-sum: calc(1 - var(--check-1-carry)); --check-2-carry: calc(var(--check-1-carry)); } section.addition input#check-first-2:not(:checked) ~ input#check-second-2:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-2-sum: calc(var(--check-1-carry)); --check-2-carry: 0; } section.addition input#check-first-2:checked { counter-increment: first-number 4 sum-number 4; } section.addition input#check-first-2:checked ~ table .first-labels label[for=check-first-2] { --is-one: 1; } section.addition input#check-first-2:checked ~ table .hexadecimal.first { --bit-2-is-one: 1; } section.addition input#check-second-2:checked { counter-increment: second-number 4 sum-number 4; } section.addition input#check-second-2:checked ~ table .second-labels label[for=check-second-2] { --is-one: 1; } section.addition input#check-second-2:checked ~ table .hexadecimal.second { --bit-2-is-one: 1; } section.addition :is(.result-display, .number-display.hexadecimal.sum) { --check-16-sum: var(--check-15-carry); } section.addition :is(.result-display, .number-display.hexadecimal.sum) .show-check.check-2 { --is-one: var(--check-2-sum); } section.addition input#check-first-3:checked ~ input#check-second-3:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-3-sum: calc(var(--check-2-carry)); --check-3-carry: 1; } section.addition input#check-first-3:checked ~ input#check-second-3:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-3-sum: calc(1 - var(--check-2-carry)); --check-3-carry: calc(var(--check-2-carry)); } section.addition input#check-first-3:not(:checked) ~ input#check-second-3:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-3-sum: calc(1 - var(--check-2-carry)); --check-3-carry: calc(var(--check-2-carry)); } section.addition input#check-first-3:not(:checked) ~ input#check-second-3:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-3-sum: calc(var(--check-2-carry)); --check-3-carry: 0; } section.addition input#check-first-3:checked { counter-increment: first-number 8 sum-number 8; } section.addition input#check-first-3:checked ~ table .first-labels label[for=check-first-3] { --is-one: 1; } section.addition input#check-first-3:checked ~ table .hexadecimal.first { --bit-3-is-one: 1; } section.addition input#check-second-3:checked { counter-increment: second-number 8 sum-number 8; } section.addition input#check-second-3:checked ~ table .second-labels label[for=check-second-3] { --is-one: 1; } section.addition input#check-second-3:checked ~ table .hexadecimal.second { --bit-3-is-one: 1; } section.addition :is(.result-display, .number-display.hexadecimal.sum) { --check-16-sum: var(--check-15-carry); } section.addition :is(.result-display, .number-display.hexadecimal.sum) .show-check.check-3 { --is-one: var(--check-3-sum); } section.addition input#check-first-4:checked ~ input#check-second-4:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-4-sum: calc(var(--check-3-carry)); --check-4-carry: 1; } section.addition input#check-first-4:checked ~ input#check-second-4:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-4-sum: calc(1 - var(--check-3-carry)); --check-4-carry: calc(var(--check-3-carry)); } section.addition input#check-first-4:not(:checked) ~ input#check-second-4:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-4-sum: calc(1 - var(--check-3-carry)); --check-4-carry: calc(var(--check-3-carry)); } section.addition input#check-first-4:not(:checked) ~ input#check-second-4:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-4-sum: calc(var(--check-3-carry)); --check-4-carry: 0; } section.addition input#check-first-4:checked { counter-increment: first-number 16 sum-number 16; } section.addition input#check-first-4:checked ~ table .first-labels label[for=check-first-4] { --is-one: 1; } section.addition input#check-first-4:checked ~ table .hexadecimal.first { --bit-4-is-one: 1; } section.addition input#check-second-4:checked { counter-increment: second-number 16 sum-number 16; } section.addition input#check-second-4:checked ~ table .second-labels label[for=check-second-4] { --is-one: 1; } section.addition input#check-second-4:checked ~ table .hexadecimal.second { --bit-4-is-one: 1; } section.addition :is(.result-display, .number-display.hexadecimal.sum) { --check-16-sum: var(--check-15-carry); } section.addition :is(.result-display, .number-display.hexadecimal.sum) .show-check.check-4 { --is-one: var(--check-4-sum); } section.addition input#check-first-5:checked ~ input#check-second-5:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-5-sum: calc(var(--check-4-carry)); --check-5-carry: 1; } section.addition input#check-first-5:checked ~ input#check-second-5:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-5-sum: calc(1 - var(--check-4-carry)); --check-5-carry: calc(var(--check-4-carry)); } section.addition input#check-first-5:not(:checked) ~ input#check-second-5:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-5-sum: calc(1 - var(--check-4-carry)); --check-5-carry: calc(var(--check-4-carry)); } section.addition input#check-first-5:not(:checked) ~ input#check-second-5:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-5-sum: calc(var(--check-4-carry)); --check-5-carry: 0; } section.addition input#check-first-5:checked { counter-increment: first-number 32 sum-number 32; } section.addition input#check-first-5:checked ~ table .first-labels label[for=check-first-5] { --is-one: 1; } section.addition input#check-first-5:checked ~ table .hexadecimal.first { --bit-5-is-one: 1; } section.addition input#check-second-5:checked { counter-increment: second-number 32 sum-number 32; } section.addition input#check-second-5:checked ~ table .second-labels label[for=check-second-5] { --is-one: 1; } section.addition input#check-second-5:checked ~ table .hexadecimal.second { --bit-5-is-one: 1; } section.addition :is(.result-display, .number-display.hexadecimal.sum) { --check-16-sum: var(--check-15-carry); } section.addition :is(.result-display, .number-display.hexadecimal.sum) .show-check.check-5 { --is-one: var(--check-5-sum); } section.addition input#check-first-6:checked ~ input#check-second-6:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-6-sum: calc(var(--check-5-carry)); --check-6-carry: 1; } section.addition input#check-first-6:checked ~ input#check-second-6:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-6-sum: calc(1 - var(--check-5-carry)); --check-6-carry: calc(var(--check-5-carry)); } section.addition input#check-first-6:not(:checked) ~ input#check-second-6:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-6-sum: calc(1 - var(--check-5-carry)); --check-6-carry: calc(var(--check-5-carry)); } section.addition input#check-first-6:not(:checked) ~ input#check-second-6:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-6-sum: calc(var(--check-5-carry)); --check-6-carry: 0; } section.addition input#check-first-6:checked { counter-increment: first-number 64 sum-number 64; } section.addition input#check-first-6:checked ~ table .first-labels label[for=check-first-6] { --is-one: 1; } section.addition input#check-first-6:checked ~ table .hexadecimal.first { --bit-6-is-one: 1; } section.addition input#check-second-6:checked { counter-increment: second-number 64 sum-number 64; } section.addition input#check-second-6:checked ~ table .second-labels label[for=check-second-6] { --is-one: 1; } section.addition input#check-second-6:checked ~ table .hexadecimal.second { --bit-6-is-one: 1; } section.addition :is(.result-display, .number-display.hexadecimal.sum) { --check-16-sum: var(--check-15-carry); } section.addition :is(.result-display, .number-display.hexadecimal.sum) .show-check.check-6 { --is-one: var(--check-6-sum); } section.addition input#check-first-7:checked ~ input#check-second-7:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-7-sum: calc(var(--check-6-carry)); --check-7-carry: 1; } section.addition input#check-first-7:checked ~ input#check-second-7:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-7-sum: calc(1 - var(--check-6-carry)); --check-7-carry: calc(var(--check-6-carry)); } section.addition input#check-first-7:not(:checked) ~ input#check-second-7:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-7-sum: calc(1 - var(--check-6-carry)); --check-7-carry: calc(var(--check-6-carry)); } section.addition input#check-first-7:not(:checked) ~ input#check-second-7:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-7-sum: calc(var(--check-6-carry)); --check-7-carry: 0; } section.addition input#check-first-7:checked { counter-increment: first-number 128 sum-number 128; } section.addition input#check-first-7:checked ~ table .first-labels label[for=check-first-7] { --is-one: 1; } section.addition input#check-first-7:checked ~ table .hexadecimal.first { --bit-7-is-one: 1; } section.addition input#check-second-7:checked { counter-increment: second-number 128 sum-number 128; } section.addition input#check-second-7:checked ~ table .second-labels label[for=check-second-7] { --is-one: 1; } section.addition input#check-second-7:checked ~ table .hexadecimal.second { --bit-7-is-one: 1; } section.addition :is(.result-display, .number-display.hexadecimal.sum) { --check-16-sum: var(--check-15-carry); } section.addition :is(.result-display, .number-display.hexadecimal.sum) .show-check.check-7 { --is-one: var(--check-7-sum); } section.addition input#check-first-8:checked ~ input#check-second-8:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-8-sum: calc(var(--check-7-carry)); --check-8-carry: 1; } section.addition input#check-first-8:checked ~ input#check-second-8:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-8-sum: calc(1 - var(--check-7-carry)); --check-8-carry: calc(var(--check-7-carry)); } section.addition input#check-first-8:not(:checked) ~ input#check-second-8:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-8-sum: calc(1 - var(--check-7-carry)); --check-8-carry: calc(var(--check-7-carry)); } section.addition input#check-first-8:not(:checked) ~ input#check-second-8:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-8-sum: calc(var(--check-7-carry)); --check-8-carry: 0; } section.addition input#check-first-8:checked { counter-increment: first-number 256 sum-number 256; } section.addition input#check-first-8:checked ~ table .first-labels label[for=check-first-8] { --is-one: 1; } section.addition input#check-first-8:checked ~ table .hexadecimal.first { --bit-8-is-one: 1; } section.addition input#check-second-8:checked { counter-increment: second-number 256 sum-number 256; } section.addition input#check-second-8:checked ~ table .second-labels label[for=check-second-8] { --is-one: 1; } section.addition input#check-second-8:checked ~ table .hexadecimal.second { --bit-8-is-one: 1; } section.addition :is(.result-display, .number-display.hexadecimal.sum) { --check-16-sum: var(--check-15-carry); } section.addition :is(.result-display, .number-display.hexadecimal.sum) .show-check.check-8 { --is-one: var(--check-8-sum); } section.addition input#check-first-9:checked ~ input#check-second-9:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-9-sum: calc(var(--check-8-carry)); --check-9-carry: 1; } section.addition input#check-first-9:checked ~ input#check-second-9:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-9-sum: calc(1 - var(--check-8-carry)); --check-9-carry: calc(var(--check-8-carry)); } section.addition input#check-first-9:not(:checked) ~ input#check-second-9:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-9-sum: calc(1 - var(--check-8-carry)); --check-9-carry: calc(var(--check-8-carry)); } section.addition input#check-first-9:not(:checked) ~ input#check-second-9:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-9-sum: calc(var(--check-8-carry)); --check-9-carry: 0; } section.addition input#check-first-9:checked { counter-increment: first-number 512 sum-number 512; } section.addition input#check-first-9:checked ~ table .first-labels label[for=check-first-9] { --is-one: 1; } section.addition input#check-first-9:checked ~ table .hexadecimal.first { --bit-9-is-one: 1; } section.addition input#check-second-9:checked { counter-increment: second-number 512 sum-number 512; } section.addition input#check-second-9:checked ~ table .second-labels label[for=check-second-9] { --is-one: 1; } section.addition input#check-second-9:checked ~ table .hexadecimal.second { --bit-9-is-one: 1; } section.addition :is(.result-display, .number-display.hexadecimal.sum) { --check-16-sum: var(--check-15-carry); } section.addition :is(.result-display, .number-display.hexadecimal.sum) .show-check.check-9 { --is-one: var(--check-9-sum); } section.addition input#check-first-10:checked ~ input#check-second-10:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-10-sum: calc(var(--check-9-carry)); --check-10-carry: 1; } section.addition input#check-first-10:checked ~ input#check-second-10:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-10-sum: calc(1 - var(--check-9-carry)); --check-10-carry: calc(var(--check-9-carry)); } section.addition input#check-first-10:not(:checked) ~ input#check-second-10:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-10-sum: calc(1 - var(--check-9-carry)); --check-10-carry: calc(var(--check-9-carry)); } section.addition input#check-first-10:not(:checked) ~ input#check-second-10:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-10-sum: calc(var(--check-9-carry)); --check-10-carry: 0; } section.addition input#check-first-10:checked { counter-increment: first-number 1024 sum-number 1024; } section.addition input#check-first-10:checked ~ table .first-labels label[for=check-first-10] { --is-one: 1; } section.addition input#check-first-10:checked ~ table .hexadecimal.first { --bit-10-is-one: 1; } section.addition input#check-second-10:checked { counter-increment: second-number 1024 sum-number 1024; } section.addition input#check-second-10:checked ~ table .second-labels label[for=check-second-10] { --is-one: 1; } section.addition input#check-second-10:checked ~ table .hexadecimal.second { --bit-10-is-one: 1; } section.addition :is(.result-display, .number-display.hexadecimal.sum) { --check-16-sum: var(--check-15-carry); } section.addition :is(.result-display, .number-display.hexadecimal.sum) .show-check.check-10 { --is-one: var(--check-10-sum); } section.addition input#check-first-11:checked ~ input#check-second-11:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-11-sum: calc(var(--check-10-carry)); --check-11-carry: 1; } section.addition input#check-first-11:checked ~ input#check-second-11:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-11-sum: calc(1 - var(--check-10-carry)); --check-11-carry: calc(var(--check-10-carry)); } section.addition input#check-first-11:not(:checked) ~ input#check-second-11:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-11-sum: calc(1 - var(--check-10-carry)); --check-11-carry: calc(var(--check-10-carry)); } section.addition input#check-first-11:not(:checked) ~ input#check-second-11:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-11-sum: calc(var(--check-10-carry)); --check-11-carry: 0; } section.addition input#check-first-11:checked { counter-increment: first-number 2048 sum-number 2048; } section.addition input#check-first-11:checked ~ table .first-labels label[for=check-first-11] { --is-one: 1; } section.addition input#check-first-11:checked ~ table .hexadecimal.first { --bit-11-is-one: 1; } section.addition input#check-second-11:checked { counter-increment: second-number 2048 sum-number 2048; } section.addition input#check-second-11:checked ~ table .second-labels label[for=check-second-11] { --is-one: 1; } section.addition input#check-second-11:checked ~ table .hexadecimal.second { --bit-11-is-one: 1; } section.addition :is(.result-display, .number-display.hexadecimal.sum) { --check-16-sum: var(--check-15-carry); } section.addition :is(.result-display, .number-display.hexadecimal.sum) .show-check.check-11 { --is-one: var(--check-11-sum); } section.addition input#check-first-12:checked ~ input#check-second-12:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-12-sum: calc(var(--check-11-carry)); --check-12-carry: 1; } section.addition input#check-first-12:checked ~ input#check-second-12:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-12-sum: calc(1 - var(--check-11-carry)); --check-12-carry: calc(var(--check-11-carry)); } section.addition input#check-first-12:not(:checked) ~ input#check-second-12:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-12-sum: calc(1 - var(--check-11-carry)); --check-12-carry: calc(var(--check-11-carry)); } section.addition input#check-first-12:not(:checked) ~ input#check-second-12:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-12-sum: calc(var(--check-11-carry)); --check-12-carry: 0; } section.addition input#check-first-12:checked { counter-increment: first-number 4096 sum-number 4096; } section.addition input#check-first-12:checked ~ table .first-labels label[for=check-first-12] { --is-one: 1; } section.addition input#check-first-12:checked ~ table .hexadecimal.first { --bit-12-is-one: 1; } section.addition input#check-second-12:checked { counter-increment: second-number 4096 sum-number 4096; } section.addition input#check-second-12:checked ~ table .second-labels label[for=check-second-12] { --is-one: 1; } section.addition input#check-second-12:checked ~ table .hexadecimal.second { --bit-12-is-one: 1; } section.addition :is(.result-display, .number-display.hexadecimal.sum) { --check-16-sum: var(--check-15-carry); } section.addition :is(.result-display, .number-display.hexadecimal.sum) .show-check.check-12 { --is-one: var(--check-12-sum); } section.addition input#check-first-13:checked ~ input#check-second-13:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-13-sum: calc(var(--check-12-carry)); --check-13-carry: 1; } section.addition input#check-first-13:checked ~ input#check-second-13:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-13-sum: calc(1 - var(--check-12-carry)); --check-13-carry: calc(var(--check-12-carry)); } section.addition input#check-first-13:not(:checked) ~ input#check-second-13:checked ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-13-sum: calc(1 - var(--check-12-carry)); --check-13-carry: calc(var(--check-12-carry)); } section.addition input#check-first-13:not(:checked) ~ input#check-second-13:not(:checked) ~ table :is(.result-display, .number-display.hexadecimal.sum) { --check-13-sum: calc(var(--check-12-carry)); --check-13-carry: 0; } section.addition input#check-first-13:checked { counter-increment: first-number 8192 sum-number 8192; } section.addition input#check-first-13:checked ~ table .first-labels label[for=check-first-13] { --is-one: 1; } section.addition input#check-first-13:checked ~ table .hexadecimal.first { --bit-13-is-one: 1; } section.addition input#check-second-13:checked { counter-increment: second-number 8192 sum-number 8192; } section.addition input#check-second-13:checked ~ table .second-labels label[for=check-second-13] { --is-one: 1; } section.addition input#check-second-13:checked ~ table .hexadecimal.second { --bit-13-is-one: 1; } section.addition :is(.result-display, .number-display.hexadecimal.sum) { --check-16-sum: var(--check-15-carry); } section.addition :is(.result-display, .number-display.hexadecimal.sum) .show-check.check-13 { --is-one: var(--check-13-sum); } section.addition input#check-first-14:checked ~ input#check-second-14:checked ~ t.........完整代码请登录后点击上方下载按钮下载查看
网友评论0