How to use pure CSS to implement a moving hand (source code attached)-CSS Tutorial-php.cn

How to use pure CSS to implement a moving hand (source code attached)

不言

Release： 2018-09-11 15:04:12

Original

2308 people have browsed it

The content of this article is about how to use pure CSS to realize a moving hand (source code attached). It has certain reference value. Friends in need can refer to it. I hope it will be useful to you. Helps.

Effect preview

How to use pure CSS to implement a moving hand (source code attached)

##Source code download

https:/ /github.com/comehope/front-end-daily-challenges

Code interpretation

Define dom, the 5

.finger elements in the container represent 5 fingers, The .thumb element represents the thumb, and the .palm element represents the palm:

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

Copy after login

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(white, lightcyan);
}

Copy after login

defines the container size, where

outline The attribute is an auxiliary line:

.hand {
    width: 16em;
    height: 8em;
    font-size: 10px;
    outline: 1px dashed black;
}

Copy after login

Draw the palm:

.hand {
    position: relative;
    color: darksalmon;
}

.palm {
    position: absolute;
    width: 8em;
    height: 6em;
    background-color: currentColor;
    border-radius: 1em 4em;
    right: 0;
}

Copy after login

Draw the outline of the 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);
}

Copy after login

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);
}

Copy after login

Draw the second half of the index finger close to the palm:

.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);
}

Copy after login

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);
}

Copy after login

Set subscript variables for the other 4 fingers except the thumb , gradually shrinking and deepening in color from the index finger to the little finger:

.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; }

Copy after login

Use pseudo elements to draw the shadow of the hand:

.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);
}

Copy after login

Increase the animation effect of finger tapping on the desktop:

.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));
    }
}

Copy after login

Finally, don’t forget to delete the guide lines.

Done!

Related recommendations:

How to use pure CSS to achieve the effect of a pair of scissors (source code attached)

How to use pure CSS to achieve stripes Illusion animation effect (with source code)

The above is the detailed content of How to use pure CSS to implement a moving hand (source code attached). For more information, please follow other related articles on the PHP Chinese website!