So erzielen Sie mit reinem CSS den Effekt einer Schere (Quellcode im Anhang)-CSS-Tutorial-php.cn

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

不言

Freigeben： 2018-09-10 15:38:56

Original

2537 Leute haben es durchsucht

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

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

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>

Nach dem Login kopieren

Zentrierte Anzeige:

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

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

.scissors {
    position: relative;
}

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

Nach dem Login kopieren

Zeichnen Sie den Griff des Messers:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

Machen Sie die Hälfte des gekippten Messers:

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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!