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

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

不言

Libérer： 2018-09-10 15:38:56

original

2539 Les gens l'ont consulté

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

Comment utiliser du CSS pur pour obtenir leffet dune paire de ciseaux (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, 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>

Copier après la connexion

Affichage centré :

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

Copier après la connexion

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

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

Copier après la connexion

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

Copier après la connexion

Dessinez le manche :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

Inclinez la moitié du couteau :

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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

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'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!