纯CSS计算器

下载代码

html

css

分享到微信朋友圈

html

<form>
    <div id="digit1">
        <input type="checkbox" id="d1-1" class="number1">
        <input type="checkbox" id="d1-2" class="number2">
        <input type="checkbox" id="d1-3" class="number3">
        <input type="checkbox" id="d1-4" class="number4">
        <input type="checkbox" id="d1-5" class="number5">
        <input type="checkbox" id="d1-6" class="number6">
        <input type="checkbox" id="d1-7" class="number7">
        <input type="checkbox" id="d1-8" class="number8">
        <input type="checkbox" id="d1-9" class="number9">
        <div id="digit2">
            <input type="checkbox" id="d2-0" class="number0">
            <input type="checkbox" id="d2-1" class="number1">
            <input type="checkbox" id="d2-2" class="number2">
            <input type="checkbox" id="d2-3" class="number3">
            <input type="checkbox" id="d2-4" class="number4">
            <input type="checkbox" id="d2-5" class="number5">
            <input type="checkbox" id="d2-6" class="number6">
            <input type="checkbox" id="d2-7" class="number7">
            <input type="checkbox" id="d2-8" class="number8">
            <input type="checkbox" id="d2-9" class="number9">
            <div id="digit3">
                <input type="checkbox" id="d3-0" class="number0">
                <input type="checkbox" id="d3-1" class="number1">
                <input type="checkbox" id="d3-2" class="number2">
                <input type="checkbox" id="d3-3" class="number3">
                <input type="checkbox" id="d3-4" class="number4">
                <input type="checkbox" id="d3-5" class="number5">
                <input type="checkbox" id="d3-6" class="number6">
                <input type="checkbox" id="d3-7" class="number7">
                <input type="checkbox" id="d3-8" class="number8">
                <input type="checkbox" id="d3-9" class="number9">
                <div id="digit4">
                    <input type="checkbox" id="d4-0" class="number0">
                    <input type="checkbox" id="d4-1" class="number1">
                    <input type="checkbox" id="d4-2" class="number2">
                    <input type="checkbox" id="d4-3" class="number3">
                    <input type="checkbox" id="d4-4" class="number4">
                    <input type="checkbox" id="d4-5" class="number5">
                    <input type="checkbox" id="d4-6" class="number6">
                    <input type="checkbox" id="d4-7" class="number7">
                    <input type="checkbox" id="d4-8" class="number8">
                    <input type="checkbox" id="d4-9" class="number9">
                    <div id="digit5">
                        <input type="checkbox" id="d5-0" class="number0">
                        <input type="checkbox" id="d5-1" class="number1">
                        <input type="checkbox" id="d5-2" class="number2">
                        <input type="checkbox" id="d5-3" class="number3">
                        <input type="checkbox" id="d5-4" class="number4">
                        <input type="checkbox" id="d5-5" class="number5">
                        <input type="checkbox" id="d5-6" class="number6">
                        <input type="checkbox" id="d5-7" class="number7">
                        <input type="checkbox" id="d5-8" class="number8">
                        <input type="checkbox" id="d5-9" class="number9">
                        <div id="digit6">
                            <input type="checkbox" id="d6-0" class="number0">
                            <input type="checkbox" id="d6-1" class="number1">
                            <input type="checkbox" id="d6-2" class="number2">
                            <input type="checkbox" id="d6-3" class="number3">
                            <input type="checkbox" id="d6-4" class="number4">
                            <input type="checkbox" id="d6-5" class="number5">
                            <input type="checkbox" id="d6-6" class="number6">
                            <input type="checkbox" id="d6-7" class="number7">
                            <input type="checkbox" id="d6-8" class="number8">
                            <input type="checkbox" id="d6-9" class="number9">
                            <div id="digit7">
                                <input type="checkbox" id="d7-0" class="number0">
                                <input type="checkbox" id="d7-1" class="number1">
                                <input type="checkbox" id="d7-2" class="number2">
                                <input type="checkbox" id="d7-3" class="number3">
                                <input type="checkbox" id="d7-4" class="number4">
                                <input type="checkbox" id="d7-5" class="number5">
                                <input type="checkbox" id="d7-6" class="number6">
                                <input type="checkbox" id="d7-7" class="number7">
                                <input type="checkbox" id="d7-8" class="number8">
                                <input type="checkbox" id="d7-9" class="number9">
                                <div id="digit8">
                                    <input type="checkbox" id="d8-0" class="number0">
                                    <input type="checkbox" id="d8-1" class="number1">
                                    <input type="checkbox" id="d8-2" class="number2">
                                    <input type="checkbox" id="d8-3" class="number3">
                                    <input type="checkbox" id="d8-4" class="number4">
                                    <input type="checkbox" id="d8-5" class="number5">
                                    <input type="checkbox" id="d8-6" class="number6">
                                    <input type="checkbox" id="d8-7" class="number7">
                                    <input type="checkbox" id="d8-8" class="number8">
                                    <input type="checkbox" id="d8-9" class="number9">
                                    <div id="operations">
                                        <input type="checkbox" id="add">
                                        <input type="checkbox" id="subtract">
                                        <input type="checkbox" id="multiply">
                                        <input type="checkbox" id="divide">
                                        <input type="checkbox" id="equals">
                                        <main>
                                            <div id="screen">
                                                <div id="input"></div>
                                                <div id="output"></div>
                                            </div>
                                            <div id="buttons">
                                                <button type="button">
														<label for="d8-7" class="digit8"></label>
														<label for="d7-7" class="digit7"></label>
														<label for="d6-7" class="digit6"></label>
														<label for="d5-7" class="digit5"></label>
														<label for="d4-7" class="digit4"></label>
														<label for="d3-7" class="digit3"></label>
														<label for="d2-7" class="digit2"></label>
														<label for="d1-7" class="digit1"></label>
														7
													</button>
                                                <button type="button">
														<label for="d8-8" class="digit8"></label>
														<label for="d7-8" class="digit7"></label>
														<label for="d6-8" class="digit6"></label>
														<label for="d5-8" class="digit5"></label>
														<label for="d4-8" class="digit4"></label>
														<label for="d3-8" class="digit3"></label>
														<label for="d2-8" class="digit2"></label>
														<label for="d1-8" class="digit1"></label>
														8
													</button>
                                                <button type="button">
														<label for="d8-9" class="digit8"></label>
														<label for="d7-9" class="digit7"></label>
														<label for="d6-9" class="digit6"></label>
														<label for="d5-9" class="digit5"></label>
														<label for="d4-9" class="digit4"></label>
														<label for="d3-9" class="digit3"></label>
														<label for="d2-9" class="digit2"></label>
														<label for="d1-9" class="digit1"></label>
														9
													</button>
                                                <button type="button"><label for="divide"></label>÷</button>
                                                <button type="button">
														<label for="d8-4" class="digit8"></label>
														<label for="d7-4" class="digit7"></label>
														<label for="d6-4" class="digit6"></label>
														<label for="d5-4" class="digit5"></label>
														<label for="d4-4" class="digit4"></label>
														<label for="d3-4" class="digit3"></label>
														<label for="d2-4" class="digit2"></label>
														<label for="d1-4" class="digit1"></label>
														4
													</button>
                                                <button type="button">
														<label for="d8-5" class="digit8"></label>
														<label for="d7-5" class="digit7"></label>
														<label for="d6-5" class="digit6"></label>
														<label for="d5-5" class="digit5"></label>
														<label for="d4-5" class="digit4"></label>
														<label for="d3-5" class="digit3"></label>
														<label for="d2-5" class="digit2"></label>
														<label for="d1-5" class="digit1"></label>
														5
													</button>
                                                <button type="button">
														<label for="d8-6" class="digit8"></label>
														<label for="d7-6" class="digit7"></label>
														<label for="d6-6" class="digit6"></label>
														<label for="d5-6" class="digit5"></label>
														<label for="d4-6" class="digit4"></label>
														<label for="d3-6" class="digit3"></label>
														<label for="d2-6" class="digit2"></label>
														<label for="d1-6" class="digit1"></label>
														6
													</button>
                                                <button type="button"><label for="multiply"></label>×</button>
                                                <button type="button">
														<label for="d8-1" class="digit8"></label>
														<label for="d7-1" class="digit7"></label>
														<label for="d6-1" class="digit6"></label>
														<label for="d5-1" class="digit5"></label>
														<label for="d4-1" class="digit4"></label>
														<label for="d3-1" class="digit3"></label>
														<label for="d2-1" class="digit2"></label>
														<label for="d1-1" class="digit1"></label>
														1
													</button>
                                                <button type="button">
														<label for="d8-2" class="digit8"></label>
														<label for="d7-2" class="digit7"></label>
														<label for="d6-2" class="digit6"></label>
														<label for="d5-2" class="digit5"></label>
														<label for="d4-2" class="digit4"></label>
														<label for="d3-2" class="digit3"></label>
														<label for="d2-2" class="digit2"></label>
														<label for="d1-2" class="digit1"></label>
														2
													</button>
                                                <button type="button">
														<label for="d8-3" class="digit8"></label>
														<label for="d7-3" class="digit7"></label>
														<label for="d6-3" class="digit6"></label>
														<label for="d5-3" class="digit5"></label>
														<label for="d4-3" class="digit4"></label>
														<label for="d3-3" class="digit3"></label>
														<label for="d2-3" class="digit2"></label>
														<label for="d1-3" class="digit1"></label>
														3
													</button>
                                                <button type="button"><label for="subtract"></label>-</button>
                                                <button type="button"><input type="reset" value="AC"></button>
                                                <button type="button">
														<label for="d8-0" class="digit8"></label>
														<label for="d7-0" class="digit7"></label>
														<label for="d6-0" class="digit6"></label>
														<label for="d5-0" class="digit5"></label>
														<label for="d4-0" class="digit4"></label>
														<label for="d3-0" class="digit3"></label>
														<label for="d2-0" class="digit2"></label>
														<label for="d1-0" class="digit1"></label>
														0
													</button>
                                                <button type="button"><label for="equals"></label>=</button>
                                                <button type="button"><label for="add"></label>+</button>
                                            </div>
                                        </main>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</form>
<button id="why">
		<svg viewBox="0 0 24 24">
			<path d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z" style="fill:currentColor;"/>
		</svg>
	</button>
<section>
    <h1>How and why?</h1>
    <p>Why? Well, because it is possible. Essentially, I enjoy taking things to extremes and making things that some people might think are not possible.</p>
    <p>
        How did I do it? Well, it's a mix of using CSS variables, a fitting HTML structure with over 80 checkboxes and labels, calc() for the math, and CSS counters to output things. Have a look at the source code! I promise, there's absolutely zero Javascript.
        Even this dialog is pure CSS!
    </p>
    <p>PS: unfortunately Google Chrome doesn't like it when you divide with calc(). It should work according to the specs, but it doesn't. Bummer. Try it in Firefox!
</section>

css

/* ### LOGIC ################ */
.number9 + * { --digit: 0; }
.number0:checked + * + * + * + * + * + * + * + * + * + * { --digit: 0; }
.number1:checked + * + * + * + * + * + * + * + * + * { --digit: 1; }
.number2:checked + * + * + * + * + * + * + * + * { --digit: 2; }
.number3:checked + * + * + * + * + * + * + * { --digit: 3; }
.number4:checked + * + * + * + * + * + * { --digit: 4; }
.number5:checked + * + * + * + * + * { --digit: 5; }
.number6:checked + * + * + * + * { --digit: 6; }
.number7:checked + * + * + * { --digit: 7; }
.number8:checked + * + * { --digit: 8; }
.number9:checked + * { --digit: 9; }

#digit1 > :checked ~ :last-child { --digit-1: var(--digit); --value-1: var(--digit); }
#digit2 > :checked ~ :last-child { --digit-2: var(--digit); --value-1: calc(var(--digit-1) * 10 + var(--digit-2)); }
#digit3 > :checked ~ :last-child { --digit-3: var(--digit); --value-1: calc(var(--digit-1) * 100 + var(--digit-2) * 10 + var(--digit-3)); }
#digit4 > :checked ~ :last-child { --digit-4: var(--digit); --value-1: calc(var(--digit-1) * 1000 + var(--digit-2) * 100 + var(--digit-3) * 10 + var(--digit-4)); }
#digit5 > :checked ~ :last-child { --digit-5: var(--digit); --value-2: var(--digit-5); }
#digit6 > :checked ~ :last-child { --digit-6: var(--digit); --value-2: calc(var(--digit-5) * 10 + var(--digit-6)); }
#digit7 > :checked ~ :last-child { --digit-7: var(--digit); --value-2: calc(var(--digit-5) * 100 + var(--digit-6) * 10 + var(--digit-7)); }
#digit8 > :checked ~ :last-child { --digit-8: var(--digit); --value-2: calc(var(--digit-5) * 1000 + var(--digit-6) * 100 + var(--digit-7) * 10 + var(--digit-8)); }

#add:checked      ~ #equals:checked ~ main { --out: calc(var(--value-1) + var(--value-2)); }
#subtract:checked ~ #equals:checked ~ main { --out: calc(var(--value-1) - var(--value-2)); }
#multiply:checked ~ #equals:checked ~ main { --out: calc(var(--value-1) * var(--value-2)); }
#divide:checked   ~ #equals:checked ~ main { --out: calc(var(--value-1) / var(--value-2)); }

main { counter-reset: value1 var(--value-1, 0) value2 var(--value-2, 0) out var(--out, 0); }

/*    a
*/
 #input::after { content: ""; }
#output::after { content: counter(value1); }

/*    a
      +
*/
#operations > :checked ~ #equals:not(:checked) ~ main #input::after { content: counter(value1); }

#add:checked      ~ #equals:not(:checked) ~ main  #output::after { content: "+"; }
#subtract:checked ~ #equals:not(:checked) ~ main  #output::after { content: "-"; }
#multiply:checked ~ #equals:not(:checked) ~ main  #output::after { content: "\00D7"; }
#divide:checked   ~ #equals:not(:checked) ~ main  #output::after { content: "\00f7"; }

/*   a +
       b
*/
#digit5 :checked ~ div #add:checked      ~ #equals:not(:checked) ~ main  #input::after { content: counter(value1) " + "; }
#digit5 :checked ~ div #subtract:checked ~ #equals:not(:checked) ~ main  #input::after { content: counter(value1) " - "; }
#digit5 :checked ~ div #multiply:checked ~ #equals:not(:checked) ~ main  #input::after { content: counter(value1) " \00D7  "; }
#digit5 :checked ~ div #divide:checked   ~ #equals:not(:checked) ~ main  #input::after { content: counter(value1) " \00f7 "; }

#digit5 :checked ~ div #operations > :checked ~ #equals:not(:checked) ~ main #output::after,
#digit5 :checked ~     #operations > :checked ~ #equals:not(:checked) ~ main #output::after { content: counter(value2); }

/* a + b
       c
*/
#add:checked      ~ #equals:checked ~ main  #input::after { content: counter(value1) " + " counter(value2); }
#subtract:checked ~ #equals:checked ~ main  #input::after { content: counter(value1) " - " counter(value2); }
#multiply:checked ~ #equals:checked ~ main  #input::after { content: counter(value1) " \00D7  " counter(value2); }
#divide:checked   ~ #equals:checked ~ main  #input::after { content: counter(value1) " \00f7  " counter(value2); }

#equals:checked ~ main #output::after { content: counter(out); }

/* dividing by 0 */
#digit5 > .number0:checked ~ div #divide:checked ~ #equals:checked ~ main #output::after { content: "Oi"; }

#digit5 > .number0:checked ~ div #divide:checked ~ #equals:checked ~ main #output::after { content: "Oi"; }
#digit5 :not(.number0):checked ~ div #divide:checked ~ #equals:checked ~ main #output::after { content: counter(out); }

button {
	position: relative;
	border: none;
}

label {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	left: 0;
	top: 0;
}

label.digit5,
label.digit6,
label.digit7,
label.digit8 { display: none; }

#operations > :checked ~ main label { display: block; }

#digit1 > :checked ~ div label.digit1 { display: none; }
#digit2 > :checked ~ div label.digit2 { display: none; }
#digit3 > :checked ~ div label.digit3 { display: none; }
#digit4 > :checked ~ div label.digit4 { display: none; }

#digit5 > :checked ~ div label.digit5 { display: none; }
#digit6 > :checked ~ div label.digit6 { display: none; }
#digit7 > :checked ~ div label.digit7 { display: none; }
#digit8 > :checked ~ div label.digit8 { display: none; }

#operations > :checked ~ #equals:not(:checked) ~ main label:nth-child(n + 4) { display: none; }
#operations > :checked ~ #equals:not(:checked) ~ main label.digit5 { display: block; }

#operations > :checked ~ #equals:checked ~ main label { display: none !important; }

#digit5 > :checked ~ div #operations > :checked ~ #equals:not(:checked) ~ main label.digit5 { display: none; }
#digit5 > .number0:checked ~ div  #operations > :checked ~ #equals:not(:checked) ~ main label.digit5 { display: block; }
#digit5 > .number0:checked ~ :checked ~ div  #operations > :checked ~ #equals:not(:checked) ~ main label.digit5 { display: none; }

label[for=equals]{ display: none; }
#digit5 > :checked ~ div #operations > :checked ~ #equals ~ main label[for=equals]{ display: block; }

#operations > :checked ~ main button:nth-child(4n) label { display: none; }

#digit5 > .number0:checked ~ div main button:nth-child(14) label { pointer-events: none; }
#digit5 > .number0:checked ~ :checked ~ div main button:nth-child(14) label { pointer-events: initial; }

input[type=checkbox]{
	position: fixed;
	right: 0;
	top: 0;
	display: block;
	width: 1px;
	height: 1px;
	opacity: 0.01;
	transform: scale(0.01);
}

/* ### DESIGN #######################*/
body {
	font: 20px / 1.5 Roboto, arial, sans-serif;
	height: 100vh;
	width: 100vw;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0;
	background-color: khaki;
}

main {
	width: 100vw;
	max-width: 400px;
	height: 100vh;
  min-height: 500px;
	max-height: 600px;
	display: flex;
	flex-direction: column;
	box-shadow: 0 4px 10px 2px rgba(0, 0, 0, 0.1),
		0 5px 20px 5px rgba(0, 0, 0, 0.08),
		0 2px 6px rgba(0, 0, 0, 0.1);
	background-color: #f7f5eb;
}

#screen {
	height: 250px;
	text-align: right;
	color: rgba(0, 0, 0, 0.7);
}

#input {
	height: 50px;
	line-height: 50px;
	padding: 50px 36px 0;
}

#output {
	height: 150px;
	line-height: 100px;
	padding: 0 36px;
	font-size: 80px;
}

#buttons {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-columns: repeat(4, 1fr);
	background-color: #555;
}

button::-moz-focus-inner, input::-moz-focus-inner { border: 0; }

button {
	color: rgba(255, 255, 255, 0.7);
	background: none;
	font-size: 20px;
	font-family: inherit;
	outline: none;
	padding: 0;
	overflow: hidden;
}

button::after {
	content: "";
	background-color: rgba(255, 255, 255, 0.1);
	opacity: 0;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	transition: .2s;
	pointer-events: none;
}

button:hover::after {
	opacity: 1;
}

button::before {
	content: "";
	background-color: rgba(255, 255, 255, 0.1);
	width: 100px;
	height: 100px;
	border-radius: 50%;
	position: absolute;
	left: 50%;
	top: 50%;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.8);
	transition: .3s;
	animation: .2s 0s 1 bloop;
	pointer-events: none;
}

@keyframes bloop{
	from { transform: translate(-50%, -50%); opacity: 1; }
	to { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

button:active::before {
	opacity: 1;
	transform: translate(-50%, -50%);	
	animation: none;
}

button:nth-child(4n){
	background-color: #f4e660;
	color: rgba(0, 0, 0, 0.6);
}

button:nth-child(4n)::after, button:nth-child(4n)::before{
	background-color: rgba(121, 104, 6, 0.1);
}

button, button * {
	cursor: pointer;
}

button:nth-child(13){
	overflow: visible;
}
button:nth-child(13)::before, button:nth-child(13)::after{
	content: none;
}

input[type=reset]{
	background: #f4e660;
	border: none;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: rgba(0, 0, 0, 0.6);
	font-size: inherit;
	font-family: inherit;
	padding: 0;
	outline: none;
	transition: .2s;
}

input[type=reset]:hover{ background-color: #e7d956; }
input[type=reset]:active { background-color: #dccd4d; }

button#why {
	color: rgba(0, 0, 0, 0.3);
	width: 40px;
	height: 40px;
	padding: 16px;
	box-sizing: content-box;
	position: fixed;
	top: 0;
	right: 0;
}

button#why::before, button#why::after { content: none; }

section {
  font-size: 16px;
	width: 450px;
	box-sizing: border-box;
	position: fixed;
	top: 12px;
	right: -700px;
	max-width: calc(100vw - 24px);
	max-height: calc(100vh - 24px);
	background-color: white;
	transform-origin: 95% 5%;
	transform: scale(0.8);
	opacity: 0;
	box-shadow: 0 4px 10px 2px rgba(0, 0, 0, 0.1),
		0 5px 20px 5px rgba(0, 0, 0, 0.08),
		0 10px 30px 10px rgba(0, 0, 0, 0.08);
	transition: all .3s, right 0s .3s;
	background-color: #f7f5eb;
	padding: 2em;
}

button#why:focus + section {
	right: 12px;
	transform: none;
	opacity: 1;
	transition: all .3s, right 0s;
}

section h1 {
	padding-left: 24px;
	font-size: 2em;
	margin: 0 auto 40px;
}

section p { margin: 18px 0; }
section p:last-child { margin-bottom: 12px; }

a {
	color: rgba(0, 0, 0, 0.25);
	width: 48px;
	height: 48px;
	padding: 12px;
	position: fixed;
	top: 0;
	left: 0;
}

svg {
	display: block;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 600px){
	main {
		max-width: none;
		max-height: none;
	}
	button#why, a {
		padding: 12px;
		width: 36px;
		height: 36px;
	}
}

@media screen and (max-height: 500px){
	section { width: 900px; }
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg