Results preview
Press the right "click the Preview" button to preview the current page, click on the link to full-screen preview.
https://codepen.io/comehope/pen/WgdVyx/
Interactive video
This video is interactive, you can pause the code video, editing video.
Please use chrome, safari, edge open view.
https://scrimba.com/p/pEgDAM/c23zLuN
Source code download
Daily front-end combat series full source code can be downloaded from github:
https://github.com/comehope/front-end-daily-challenges
Code Reading
Defined dom, the container 5 .finger
element represents the five fingers, .thumb
element represents thumb, .palm
elements representative of palm:
<div class="hand">
<span class="finger thumb"></span>
<span class="finger"></span>
<span class="finger"></span>
<span class="finger"></span>
<span class="finger"></span>
<span class="palm"></span>
</div>
Centered:
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: radial-gradient(white, lightcyan);
}
Defined size of the container, wherein the outline
property is the auxiliary line:
.hand {
width: 16em;
height: 8em;
font-size: 10px;
outline: 1px dashed black;
}
Draw palm:
.hand {
position: relative;
color: darksalmon;
}
.palm {
position: absolute;
width: 8em;
height: 6em;
background-color: currentColor;
border-radius: 1em 4em;
right: 0;
}
Draw the outline of thumb:
.thumb {
position: absolute;
width: 9.6em;
height: 3.2em;
background-color: currentColor;
border-radius: 3em 2em 2em 1em;
right: 0;
bottom: 1em;
transform-origin: calc(100% - 2em) 2em;
transform: rotate(-20deg);
border-bottom: 0.2em solid rgba(0, 0, 0, 0.1);
border-left: 0.2em solid rgba(0, 0, 0, 0.1);
}
Draw the nail on the thumb:
.thumb::before {
content: '';
position: absolute;
width: 1.9em;
height: 1.9em;
background-color: rgba(255, 255, 255, 0.3);
border-radius: 60% 10% 10% 30%;
bottom: -0.3em;
left: 0.5em;
border-right: 0.1em solid rgba(0, 0, 0, 0.1);
}
Draw index finger close to the palm of the second half:
.finger:not(:first-child) {
position: absolute;
width: 6.4em;
height: 3.5em;
background-color: currentColor;
right: 5.2em;
bottom: 4em;
transform-origin: 100% 2em;
transform: rotate(10deg);
}
Draw the first half of the index finger:
.finger:not(:first-child)::before {
content: '';
position: absolute;
width: 9em;
height: 3em;
background-color: currentColor;
right: 4.2em;
top: 0.2em;
border-radius: 2em;
transform-origin: calc(100% - 2em) 2em;
transform: rotate(-60deg);
}
For other four fingers other than the thumb set index variable, tapers from the index finger to the little finger and the color deepened:
.finger:not(:first-child) {
--scale: calc(1 - (5 - var(--n)) * 0.2);
transform: rotate(10deg) scale(var(--scale));
filter: brightness(calc(100% - (5 - var(--n)) * 10%));
}
.finger:nth-child(2) { --n: 2; }
.finger:nth-child(3) { --n: 3; }
.finger:nth-child(4) { --n: 4; }
.finger:nth-child(5) { --n: 5; }
Hand painted with pseudo-element shadow:
.hand::before {
content: '';
position: absolute;
width: 14em;
height: 4.5em;
background-color: black;
border-radius: 4em 1em;
top: 4em;
filter: blur(1em) opacity(0.3);
}
Increase finger tapping the desktop animation:
.finger:not(:first-child) {
animation: tap-upper 1.2s ease-in-out infinite;
animation-delay: calc((var(--n) - 2) * 0.1s);
}
@keyframes tap-upper {
0%, 50%, 100% {
transform: rotate(10deg) scale(var(--scale));
}
40% {
transform: rotate(50deg) scale(var(--scale));
}
}
Finally, do not forget to delete the auxiliary lines.
We're done!