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.fi.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0