css实现一个四位比特加法计算器效果代码-html代码-BFW代码库

代码语言：html

代码描述：css实现一个四位比特加法计算器效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1">

  
  
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto);
html {
  width: 100vw;
  height: 100vh;
}
html body {
  width: 100%;
  height: 100%;
  display: flex;
  box-sizing: border-box;
}
html body *, html body *::before, html body *::after {
  box-sizing: inherit;
}

.container {
  --width: 50vmin;
  width: var(--width);
  --height: 50vmin;
  height: var(--height);
  margin: auto;
  position: relative;
  transform: translatex(12.5%);
  font: 15vmin "Roboto";
  --CARRY1: initial;
  --NOT-CARRY1:  ;
}
.container > .level > .bit {
  grid-area: a1;
}
.container > .level > .level > .bit {
  grid-area: a2;
}
.container > .level > .level > .level > .bit {
  grid-area: a3;
  cursor: initial;
  z-index: -1;
  border-top: 1px solid black;
}
.container > .level > .level > .level > .level > .bit {
  grid-area: a4;
}
.container > .level > .level > .level > .level > .level > .bit {
  grid-area: a5;
}
.container > .level > .level > .level > .level > .level > .level > .bit {
  grid-area: a6;
  cursor: initial;
  z-index: -1;
  border-top: 1px solid black;
}
.container > .level > .level > .level > .level > .level > .level > .level > .bit {
  grid-area: a7;
}
.container > .level > .level > .level > .level > .level > .level > .level > .level > .bit {
  grid-area: a8;
}
.container > .level > .level > .level > .level > .level > .level > .level > .level > .level > .bit {
  grid-area: a9;
  cursor: initial;
  z-index: -1;
  border-top: 1px solid black;
}
.container > .level > .level > .level > .level > .level > .level > .level > .level > .level > .level > .bit {
  grid-area: a10;
}
.container > .level > .level > .level > .level > .level > .level > .level > .level > .level > .level > .level > .bit {
  grid-area: a11;
}
.container > .level > .level > .level > .level > .level > .level > .level > .level > .level > .level > .level > .level > .bit {
  grid-area: a12;
  cursor: initial;
  z-index: -1;
  border-top: 1px solid black;
}
.container > .level > .bit + .level {
  --A1: initial;
  --NOT-A1:  ;
}
.container > .level > .bit:checked + .level {
  --A1:  ;
  --NOT-A1: initial;
}
.container > .level > .level > .bit + .level {
  --B1: initial;
  --NOT-B1:  ;
}
.container > .level > .level > .bit:checked + .level {
  --B1:  ;
  --NOT-B1: initial;
}
.container > .level > .level > .level {
  --NA1andB1: var(--NOT-A1) var(--B1);
  --A1andNB1: var(--A1) var(--NOT-B1);
  --A1xorB1: var(--NA1andB1, var(--A1andNB1));
  --SUM1: var(--A1xorB1);
  --A1andB1: var(--A1) var(--B1);
  --NA1andNB1: var(--NOT-A1) VAR(--NOT-B1);
  --A1xnorB1: var(--A1andB1, var(--NA1andNB1));
  --NOT-SUM1: var(--A1xnorB1);
  --NS1andC1: var(--NOT-SUM1) var(--CARRY1);
  --S1andNC1: var(--SUM1) var(--NOT-CARRY1);
  --S1xorC1: var(--NS1andC1, var(--S1andNC1));
  --FULL-SUM1: var(--S1xorC1);
  --A1andB1: var(--A1) var(--B1);
  --S1andC1: var(--SUM1) var(--CARRY1);
  --A1B1orS1C1: var(--A1andB1, var(--S1andC1));
  --CARRY2: var(--A1B1orS1C1);
  --NA1orNB1: var(--NOT-A1, var(--NOT-B1));
  --NS1orNC1: var(--NOT-SUM1, var(--NOT-CARRY1));
  --NA1orNB1andNS1orNC1: var(--NA1orNB1) var(--NS1orNC1);
  --NOT-CARRY2: var(--NA1orNB1andNS1orNC1);
}
.container > .level > .level > .level > .bit::before {
  --T: var(--FULL-SUM1) "1";
  --F: var(--FULL-SUM1, "0");
  content: var(--T, var(--F));
}
.container > .level > .level > .level > .level > .bit + .level {
  --A2: initial;
  --NOT-A2:  ;
}
.container > .level > .level > .level > .level > .bit:checked + .level {
  --A2:  ;
  --NOT-A2: initial;
}
.container > .level > .level > .level > .level > .level > .bit + .level {
  --B2: initial;
  --NOT-B2:  ;
}
.container > .level > .level > .level > .level > .level > .bit:checked + .level {
  --B2:  ;
  --NOT-B2: initial;
}
.container > .level > .level > .level > .level > .level > .level {
  --NA2andB2: var(--NOT-A2) var(--B2);
  --A2andNB2: var(--A2) var(--NOT-B2);
  --A2xorB2: var(--NA2andB2, var(--A2andNB2));
  --SUM2: var(--A2xorB2);
  --A2andB2: var(--A2) var(--B2);
  --NA2andNB2: var(--NOT-A2) VAR(--NOT-B2);
  --A2xnorB2: var(--A2andB2, var(--NA2andNB2));
  --NOT-SUM2: var(--A2xnorB2);
  --NS2andC2: var(--NOT-SUM2) var(--CARRY2);
  --S2andNC2: var(--SUM2) var(--NOT-CARRY2);
  --S2xorC2: var(--NS2andC2, var(--S2andNC2));
  --FULL-SUM2: var(--S2xorC2);
  --A2andB2: var(--A2) var(--B2);
  --S2andC2: var(--SUM2) var(--CARRY2);
  --A2B2orS2C2: var(--A2andB2, var(--S2andC2));
  --CARRY3: var(--A2B2orS2C2);
  --NA2orNB2: var(--NOT-A2, var(--NOT-B2));
  --NS2orNC2: var(--NOT-SUM2, var(--NOT-CARRY2));
  --NA2orNB2andNS2orNC2: var(--NA2orNB2) var(--NS2orNC2);
  --NOT-CARRY3: var(--NA2orNB2andNS2orNC2);
}
.container > .level > .level > .level > .level > .level > .level > .bit::before {
  --T: var(--FULL-SUM2) "1";
  --F: var(--FULL-SUM2, "0");
  content: var(--T, var(--F));
}
.container > .level > .level > .level > .level > .level > .level > .level > .bit + .level {
  --A3: initial;
  --NOT-A3:  ;
}
.container > .level > .level > .level > .level > .level > .level > .level > .bit:checked + .level {
  --A3:  ;
  --NOT-A3: initial;
}
.container > .level > .level > .level > .level > .level > .level > .level > .level > .bit + .level {
  --B3: initial;
  --NOT-B3:  ;
}
.container > .level > .level > .level > .level > .level > .level > .level > .level > .bit:checked + .level {
  --B3:  ;
  --NOT-B3: initial;
}
.container > .level > .level > .level > .level > .level > .level > .level > .level > .level {
  --NA3andB3: var(--NOT-A3) var(--B3);
  --A3andNB3: var(--A.........完整代码请登录后点击上方下载按钮下载查看