Comment utiliser du CSS pur pour implémenter une main en mouvement (code source ci-joint)-tutoriel CSS-php.cn

Comment utiliser du CSS pur pour implémenter une main en mouvement (code source ci-joint)

不言

Libérer： 2018-09-11 15:04:12

original

2284 Les gens l'ont consulté

Le contenu de cet article explique comment utiliser du CSS pur pour réaliser une main en mouvement (code source ci-joint). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. vous aide.

Aperçu de l'effet

Comment utiliser du CSS pur pour implémenter une main en mouvement (code source ci-joint)

Téléchargement du code source

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

Interprétation du code

Définissez dom, les 5 .finger éléments dans le conteneur représentent 5 doigts, et l'élément .thumb représente le Pouce, l'élément .palm représente la paume :

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

Copier après la connexion

Affichage centré :

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

Copier après la connexion

Définissez la taille du conteneur, où l'attribut outline est une ligne auxiliaire :

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

Copier après la connexion

Dessine la paume :

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

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

Copier après la connexion

Dessine le contour du pouce :

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

Copier après la connexion

Dessine l'ongle du pouce :

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

Copier après la connexion

Dessinez Dessinez la seconde moitié de l'index près de la paume :

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

Copier après la connexion

Dessinez la première moitié de l'index :

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

Copier après la connexion

Définissez les variables d'indice pour l'autre 4 doigts sauf le pouce, en commençant par l'index Jusqu'à ce que l'auriculaire rétrécisse progressivement et que la couleur s'approfondisse :

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

Copier après la connexion

Dessinez l'ombre de la main avec des pseudo éléments :

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

Copier après la connexion

Ajoutez l'effet d'animation du tapotement du doigt sur le bureau :

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

Copier après la connexion

Enfin, n'oubliez pas de supprimer les lignes auxiliaires.

Fait !

Recommandations associées :

Comment utiliser du CSS pur pour obtenir l'effet d'une paire de ciseaux (code source ci-joint)

Comment utiliser du CSS pur pour obtenir un effet d'animation d'illusion de rayures (avec le code source)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!