css实现一个三维可运算的二进制计算器效果代码

代码语言:html

所属分类:其他

代码描述:css实现一个三维可运算的二进制计算器效果代码,点击数字可参与运算显示结果。

代码标签: 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