css手指代码,CSS手掌（手指）计数

CSS

语言：

CSSSCSS

确定

html,

body {

min-height: 100vh;

display: flex;

}

body {

display: flex;

flex: 1;

align-items: center;

justify-content: center;

font-family: Helvetica, Arial, sans-serif;

}

strong {

font-weight: bold;

}

.hand {

background: #bbb;

border: 1px solid #999;

border-radius: 2% 2% 15% 5%;

margin: 0 auto;

width: 28vmin;

height: 25vmin;

position: relative;

--value-thumb: 1;

--value-index: 2;

--value-middle: 4;

--value-ring: 8;

--value-pinky: 16;

counter-reset: value-thumb var(--value-thumb) value-index var(--value-index) value-middle var(--value-middle) value-ring var(--value-ring) value-pinky var(--value-pinky);

}

/* Fingers and Finger States */

.hand .finger {

appearance: none;

-moz-appearance: none;

-webkit-appearance: none;

cursor: pointer;

background-color: #ddd;

border-bottom: 1px solid #999;

border-radius: 25% 25% 0 0;

display: inline-block;

width: 6vmin;

height: 10vmin;

position: absolute;

vertical-align: top;

}

.hand .finger:hover {

background-image: linear-gradient( rgba(255, 255, 255, .5), rgba(255, 255, 255, .5));

}

.hand .finger:checked {

background-color: #9f9;

}

.hand .finger:after {

content: var(--string, "");

display: block;

font-size: 2vmin;

padding: .5em;

text-align: center;

}

/* Specific Fingers */

.hand .finger#thumb {

transform: rotate(-85deg);

height: 11vmin;

bottom: -8%;

left: -28%;

--string: counter(value-thumb);

}

.hand .finger#index,

.hand .finger#middle,

.hand .finger#ring,

.hand .finger#pinky {

top: -20%;

}

.hand .finger#index {

width: 6.5vmin;

height: 18vmin;

top: -61%;

left: -2%;

transform: rotate(-1.5deg);

--string: counter(value-index);

}

.hand .finger#middle {

width: 6.5vmin;

height: 20vmin;

top: -68%;

right: 46%;

--string: counter(value-middle);

}

.hand .finger#ring {

width: 5.5vmin;

height: 18vmin;

top: -61%;

right: 20%;

transform: rotate(1.5deg);

--string: counter(value-ring);

}

.hand .finger#pinky {

width: 5vmin;

height: 15vmin;

top: -48%;

right: -2.5%;

transform: rotate(3deg);

--string: counter(value-pinky);

}

/* Message */

.hand .message {

position: relative;

height: 100%;

width: 100%;

--added-thumb: 0;

--added-index: 0;

--added-middle: 0;

--added-ring: 0;

--added-pinky: 0;

counter-reset: value-total calc( var(--added-thumb) + var(--added-index) + var(--added-middle) + var(--added-ring) + var(--added-pinky));

}

.hand .message:before,

.hand .message:after {

display: inline-block;

vertical-align: middle;

}

.hand .message:before {

content: "";

height: 100%;

width: 0px;

}

.hand .message:after {

width: 100%;

content: counter(value-total);

font-size: 7.5vmin;

text-align: center;

}

/* Checked values */

.hand .finger#thumb:checked ~ .message {

--added-thumb: 1;

}

.hand .finger#index:checked ~ .message {

--added-index: 2;

}

.hand .finger#middle:checked ~ .message {

--added-middle: 4;

}

.hand .finger#ring:checked ~ .message {

--added-ring: 8;

}

.hand .finger#pinky:checked ~ .message {

--added-pinky: 16;

}