So verwenden Sie reines CSS, um eine bewegliche Hand zu implementieren (Quellcode im Anhang)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS zur Realisierung einer beweglichen Hand (Quellcode beigefügt). Ich hoffe, dass er für Freunde in Not nützlich ist Dir. Hilft.

Effektvorschau

Quellcode-Download

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

Codeinterpretation

Definieren Sie Dom, die 5 .finger-Elemente im Container stellen 5 Finger dar und das .thumb-Element stellt den Daumen dar, das .palm-Element stellt die Handfläche dar:

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

Zentrierte Darstellung:

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

definiert die Containergröße, wobei das outline-Attribut die Hilfslinie ist:

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

Zeichnet die Handfläche:

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

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

Zeichne den Umriss des Daumens:

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

Zeichne den Nagel am Daumen:

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

Zeichne die hintere Hälfte des Zeigefingers nah heran zur Handfläche:

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

Zeichnen Sie die erste Hälfte des Zeigefingers:

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

Legen Sie Indexvariablen für die anderen 4 Finger außer dem Daumen fest, wobei die Farbe vom Zeigefinger bis zum Zeigefinger allmählich kleiner und tiefer wird der kleine 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; }

Verwenden Sie Pseudoelemente, um den Schatten der Hand zu zeichnen:

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

Fügen Sie den Animationseffekt des Fingertippens auf dem Desktop hinzu:

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

Schließlich Vergessen Sie nicht, die Hilfslinien zu löschen.

Fertig!

Verwandte Empfehlungen:

Wie man reines CSS verwendet, um den Effekt einer Schere zu erzielen (Quellcode beigefügt)

Wie um reines CSS zu verwenden, um einen Streifen-Illusion-Animationseffekt zu erzielen (mit Quellcode)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reines CSS, um eine bewegliche Hand zu implementieren (Quellcode im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!