Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

不言
Freigeben: 2018-09-11 15:04:12
Original
2292 Leute haben es durchsucht

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

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



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>
Nach dem Login kopieren

Zentrierte Darstellung:

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

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

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

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;
}
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

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; }
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

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));
    }
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage