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

Le contenu de cet article explique comment utiliser du CSS pur pour obtenir l'effet d'une paire de ciseaux (code source ci-joint). J'espère qu'il a une certaine valeur de référence. vous sera utile aidé.

Aperçu de l'effet

Téléchargement du code source

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

Interprétation du code

Définissez dom, le conteneur contient 2 éléments .half, chacun représentant la moitié des ciseaux, son sous-élément handle représente le manche, et blade représente le couteau. Le dernier .joint représente les rivets reliant les parties gauche et droite :

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

Affichage centré :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

Définissez la taille du conteneur, où outline est la ligne auxiliaire. :

.scissors {
    width: 21em;
    height: 7em;
    outline: 1px dashed;
}

Définissez la taille des demi-ciseaux, où outline est la ligne auxiliaire :

.scissors {
    position: relative;
}

.half {
    position: absolute;
    width: inherit;
    height: 4em;
    outline: 1px dashed red;
}

Dessinez le manche :

.handle {
    position: absolute;
    box-sizing: border-box;
    width: 8em;
    height: inherit;
    border: 1em solid #333;
    border-radius: 2em;
}

Dessinez le couteau et utilisez l'attribut filet pour le dessiner. Retirez la pointe supérieure :

.blade {
    position: absolute;
    width: 15em;
    height: 1em;
    background-color: silver;
    top: 3em;
    left: 6em;
    border-radius: 0 0 1em 0;
    z-index: -1;
}

Utilisez des pseudo-éléments pour dessiner un triangle au bas du couteau afin de rendre le couteau et le manche plus fermement connectés :

.blade::before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 0 1.8em 1em 1.8em;
    border-color: transparent transparent silver transparent;
    top: -1em;
    left: 0.2em;
}

Inclinez la moitié du couteau :

.half {
    transform-origin: 45% bottom;
    transform: rotate(15deg);
}

Utilisez la fonction scale() pour dessiner l'autre moitié des ciseaux :

.half {
    transform-origin: 45% bottom;
    transform: rotate(calc(15deg * var(--direction))) scaleY(var(--direction));
}

.half:nth-child(1) {
    --direction: 1;
    top: 0;
}

.half:nth-child(2) {
    --direction: -1;
    top: -1em;
}

Dessinez les rivets reliant les moitiés gauche et droite :

.joint {
    position: absolute;
    width: 0.7em;
    height: 0.7em;
    background-color: #333;
    border-radius: 50%;
    top: calc(50% - 0.7em / 2);
    left: 45%;
}

Ajouter un effet d'animation de souris animée au survol :

.scissors:hover .half {
    animation: cut 2s ease-out;
}

@keyframes cut {
    20%, 60% {
        transform: rotate(calc(30deg * var(--direction))) scaleY(var(--direction));
    }

    40%, 80% {
        transform: rotate(calc(5deg * var(--direction))) scaleY(var(--direction));
    }
}

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

Fait !

Recommandations associées :

Comment utiliser du CSS pur pour obtenir l'effet d'animation d'illusion rayé (code source joint)

Comment utiliser css pour obtenir l'effet noeud chinois (code)

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!