css做计算器,CSS3 纯CSS计算器

CSS

语言：

CSSSCSS

确定

:root {

--step: 14px;

--bg: #666;

--color: #fff;

--color-scale: #fff;

--bg-scale: #111;

--bg-checked: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.7));

--bg-unchecked: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.4));

--color-checked: var(--bg);

--color-unchecked: var(--color);

}

#display {

width: calc(100% - 10px);

margin: 5px;

padding: 10px;

font-size: 2em;

font-family: monospace;

background: var(--bg);

white-space: pre;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: justify;

-webkit-justify-content: space-between;

-ms-flex-pack: justify;

justify-content: space-between;

-webkit-align-self: flex-end;

-ms-flex-item-align: end;

align-self: flex-end;

}

#display:before {

content: '=';

}

#display::after {

content: counter(result);

}

#modmultiply:checked ~ .grid {

--result: calc(var(--a) * var(--b));

}

#modadd:checked ~ .grid {

--result: calc(var(--a) + var(--b));

}

#modsubtract:checked ~ .grid {

--result: calc(var(--a) - var(--b));

}

#a0:checked ~ .grid {

--a: 0;

}

#b0:checked ~ .grid {

--b: 0;

}

#a1:checked ~ .grid {

--a: 1;

}

#b1:checked ~ .grid {

--b: 1;

}

#a2:checked ~ .grid {

--a: 2;

}

#b2:checked ~ .grid {

--b: 2;

}

#a3:checked ~ .grid {

--a: 3;

}

#b3:checked ~ .grid {

--b: 3;

}

#a4:checked ~ .grid {

--a: 4;

}

#b4:checked ~ .grid {

--b: 4;

}

#a5:checked ~ .grid {

--a: 5;

}

#b5:checked ~ .grid {

--b: 5;

}

#a6:checked ~ .grid {

--a: 6;

}

#b6:checked ~ .grid {

--b: 6;

}

#a7:checked ~ .grid {

--a: 7;

}

#b7:checked ~ .grid {

--b: 7;

}

#a8:checked ~ .grid {

--a: 8;

}

#b8:checked ~ .grid {

--b: 8;

}

#a9:checked ~ .grid {

--a: 9;

}

#b9:checked ~ .grid {

--b: 9;

}

#modmultiply:checked ~ .grid [for=modmultiply],

#modadd:checked ~ .grid [for=modadd],

#modsubtract:checked ~ .grid [for=modsubtract] {

--background: var(--bg-checked);

--color: var(--color-checked);

}

input {

display: none;

}

#a0:checked ~ .grid [for=a0],

#b0:checked ~ .grid [for=b0] {

--background: var(--bg-checked);

--color: var(--color-checked);

}

#a1:checked ~ .grid [for=a1],

#b1:checked ~ .grid [for=b1] {

--background: var(--bg-checked);

--color: var(--color-checked);

}

#a2:checked ~ .grid [for=a2],

#b2:checked ~ .grid [for=b2] {

--background: var(--bg-checked);

--color: var(--color-checked);

}

#a3:checked ~ .grid [for=a3],

#b3:checked ~ .grid [for=b3] {

--background: var(--bg-checked);

--color: var(--color-checked);

}

#a4:checked ~ .grid [for=a4],

#b4:checked ~ .grid [for=b4] {

--background: var(--bg-checked);

--color: var(--color-checked);

}

#a5:checked ~ .grid [for=a5],

#b5:checked ~ .grid [for=b5] {

--background: var(--bg-checked);

--color: var(--color-checked);

}

#a6:checked ~ .grid [for=a6],

#b6:checked ~ .grid [for=b6] {

--background: var(--bg-checked);

--color: var(--color-checked);

}

#a7:checked ~ .grid [for=a7],

#b7:checked ~ .grid [for=b7] {

--background: var(--bg-checked);

--color: var(--color-checked);

}

#a8:checked ~ .grid [for=a8],

#b8:checked ~ .grid [for=b8] {

--background: var(--bg-checked);

--color: var(--color-checked);

}

#a9:checked ~ .grid [for=a9],

#b9:checked ~ .grid [for=b9] {

--background: var(--bg-checked);

--color: var(--color-checked);

}

body {

margin: 0;

background: var(--bg);

color: var(--color);

font-family: sans-serif;

}

h1,

h2 {

width: 100%;

font-weight: lighter;

}

.grid > div {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

background: var(--color);

-webkit-align-content: flex-start;

-ms-flex-line-pack: start;

align-content: flex-start;

-webkit-box-align: start;

-webkit-align-items: flex-start;

-ms-flex-align: start;

align-items: flex-start;

-webkit-box-flex: 1;

-webkit-flex: 1 1 calc(100% / 3 - 10);

-ms-flex: 1 1 calc(100% / 3 - 10);

flex: 1 1 calc(100% / 3 - 10);

margin: 5px;

padding: 5px;

box-sizing: border-box;

}

label {

--background: var(--bg-unchecked);

--color: var(--color-unchecked);

color: var(--color);

height: 2em;

width: 2em;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-flex: 1;

-webkit-flex: 1 1 calc(100% / 3 - 10px);

-ms-flex: 1 1 calc(100% / 3 - 10px);

flex: 1 1 calc(100% / 3 - 10px);

background-color: var(--bg);

background-image: var(--background);

box-shadow: inset 0 0 0 1px #222;

font-family: monospace;

font-size: 3em;

border-radius: 3px;

margin: 5px;

}

.grid {

counter-increment: result var(--result);

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-flex-wrap: wrap;

-ms-flex-wrap: wrap;

flex-wrap: wrap;

width: calc(var(--step) * 61);

margin: auto;

}

#a,

#b,

#mod {

-webkit-box-flex: 1;

-webkit-flex: 1 1 30%;

-ms-flex: 1 1 30%;

flex: 1 1 30%;

}