So erzielen Sie mit reinem CSS den Effekt einer Schere (Quellcode im Anhang)

Der Inhalt dieses Artikels handelt davon, wie man mit reinem CSS den Effekt einer Schere erzielt (Quellcode beigefügt). Ich hoffe, dass er einen gewissen Referenzwert hat wird Ihnen nützlich sein.

Effektvorschau

Quellcode-Download

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

Code-Interpretation

Definieren Sie dom, der Container enthält 2 .half-Elemente, die jeweils die Hälfte der Schere darstellen, sein Unterelement handle stellt den Griff dar und blade stellt die dar Das letzte .joint stellt die Nieten dar, die die linken und rechten Teile verbinden:

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

Zentrierte Anzeige:

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

definiert die Größe des Behälters, wobei outline die Hilfslinie ist:

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

definiert die halbe Scherengröße, wobei outline die Hilfslinie ist:

.scissors {
    position: relative;
}

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

Zeichnen Sie den Griff des Messers:

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

Zeichnen Sie das Messer und verwenden Sie das Filet Attribut, um die Spitze der Oberseite zu zeichnen:

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

Verwenden Sie Pseudoelemente, um ein Dreieck auf der Unterseite des Messers zu zeichnen, um die Verbindung zwischen Messer und Griff stärker zu machen:

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

Machen Sie die Hälfte des gekippten Messers:

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

Verwenden Sie die Funktion scale(), um die andere Hälfte der Schere zu zeichnen:

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

Zeichnen Sie die Nieten, die die linke und rechte Hälfte verbinden:

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

Animationseffekte beim Mouseover hinzufügen:

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

Zum Schluss vergessen Sie nicht, die Hilfslinie zu löschen.

Fertig!

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um den gestreiften Illusionsanimationseffekt zu erzielen (Quellcode im Anhang)

Verwendung CSS zur Erzielung des chinesischen Knoteneffekts (Code)

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit reinem CSS den Effekt einer Schere (Quellcode im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!