So erzielen Sie mit reinem CSS den Animationseffekt des Öffnens und Schließens eines Regenschirms (Quellcode im Anhang)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um den Animationseffekt beim Öffnen und Schließen eines Regenschirms zu realisieren (Quellcode ist beigefügt). Ich hoffe, es wird dir helfen.

Effektvorschau

Quellcode-Download

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

Codeinterpretation

definiert dom, der Container .umbralla enthält 2 Elemente, .canopy stellt die Regenschirmhülle dar, .shaft Regenschirmgriff:

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

Zentrierte Anzeige:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(skyblue, lightblue);
}

Legen Sie die gemeinsamen Attribute des Pseudoelements fest:

.umbrella *::before,
.umbrella *::after {
    content: '';
    position: absolute;
}

Zeichnen Sie zuerst den geöffneten Regenschirm.
Legen Sie die Größe des Behälters fest. Der Attributwert von font-size wird später verwendet, daher wird eine Variable definiert:

:root {
    --font-size: 10px;
}

.umbrella {
    position: relative;
    width: 25em;
    height: 26em;
    font-size: var(--font-size);
}

Definieren Sie die Größe der Regenschirmhülle:

.umbrella .canopy {
    position: absolute;
    width: inherit;
    height: 5.5em;
    top: 2.5em;
}

Verwenden Sie ::before Verwenden Sie Pseudoelemente, um den oberen Teil der Schirmhülle zu zeichnen, und komprimieren Sie ihn dann in vertikaler Richtung:

.umbrella .canopy::before {
    width: inherit;
    height: 12.5em;
    background: rgb(100, 100, 100);
    border-radius: 12.5em 12.5em 0 0;
    transform: scaleY(0.4);
    top: -4em;
}

Verwenden Sie ::after Pseudoelemente, um die untere Hälfte des Schirmbezugs zu zeichnen Schirmhülle:

.umbrella .canopy::after {
    width: inherit;
    height: 1.5em;
    background-color: #333;
    top: 4em;
    border-radius: 50%;
}

Zeichnen Sie die lange Stange des Schirmgriffs:

.umbrella .shaft {
    position: absolute;
    width: 0.8em;
    height: 18em;
    background-color: rgba(100, 100, 100, 0.7);
    top: 5.5em;
    left: calc((100% - 0.8em) / 2);
}

Verwenden Sie Pseudoelemente, um die Spitze der Schirmstange zu zeichnen, um die Schirmhülle freizulegen. Die Methode ist ähnlich Zeichnen Sie zuerst den oberen Teil der Schirmhülle und drücken Sie ihn dann in horizontaler Richtung zusammen:

.umbrella .shaft::before {
    width: 6em;
    height: 3em;
    background-color: rgba(100, 100, 100, 0.7);
    left: calc((100% - 6em) / 2);
    top: -5.5em;
    border-radius: 6em 6em 0 0;
    transform: scaleX(0.1);
}

Zeichnen Sie den hakenförmigen Griff des Schirms:

.umbrella .shaft::after {
    box-sizing: border-box;
    width: 4em;
    height: 2.5em;
    border: 1em solid #333;
    top: 100%;
    left: calc(50% - 4em + 1em / 2);
    border-radius: 0 0 2.5em 2.5em;
    border-top: none;
}

An dieser Stelle , die offene Optik des Schirms wird durch Verformung vervollständigt.
Schließen Sie zuerst das Schirmdach, indem Sie es in horizontaler Richtung zusammendrücken und in vertikaler Richtung strecken:

.umbrella .canopy {
    transform-origin: top;
    transform: scale(0.08, 4);
}

Verstecken Sie den unteren Teil des Schirmdachs:

.umbrella .canopy::after {
    transform: scaleY(0);
}

Lassen Sie den Schirm los. Kippen, Da der vertikale Regenschirm etwas langweilig ist, fügen Sie also eine kleine Änderung hinzu:

.umbrella {
    transform: rotate(-30deg);
}

An diesem Punkt sieht der Regenschirm so aus, als wäre er geschlossen, und als nächstes muss er in eine Umschaltsteuerung umgewandelt werden.
Fügen Sie ein checkbox-Steuerelement im Dom hinzu:

<input>
<figure>
    <!-- 略 -->
</figure>

Stellen Sie das Steuerelement so ein, dass es die Größe des Regenschirms hat, und platzieren Sie es auf der Regenschirmebene:

.toggle {
    position: absolute;
    filter: opacity(0);
    width: 25em;
    height: 26em;
    font-size: var(--font-size);
    cursor: pointer;
    z-index: 2;
}

checkbox Das Steuerelement ist nicht ausgewählt. Der Status entspricht dem Erscheinungsbild des Regenschirms, wenn er geschlossen ist. Dies ist das aktuelle Erscheinungsbild des Regenschirms. Sie müssen also nur das Erscheinungsbild des Regenschirms angeben, das dem ausgewählten Status des Steuerelements entspricht, wenn es geöffnet ist . Da das Schließen des Schirms durch die Verformung mehrerer Elemente erreicht wird, wird beim Umschalten in den geöffneten Zustand des Schirms die Verformung aufgehoben.
Ziehen Sie den Schirm zuerst gerade:

.toggle:checked ~ .umbrella {
    transform: rotate(0deg);
}

Dann öffnen Sie die Schirmhülle:

.toggle:checked ~ .umbrella .canopy {
    transform: scale(1, 1);
}

Dann zeigen Sie den unteren Teil der Schirmhülle:

.toggle:checked ~ .umbrella .canopy::after {
    transform: scaleY(1);
}

Zum Schluss stellen Sie die Schirmhülle ein oben Lockerungseffekte für mehrere Elemente:

.umbrella,
.umbrella .canopy,
.umbrella .canopy::after {
    transition: 0.3s cubic-bezier(0.5, -0.25, 0.5, 1.25);
}

Du bist fertig!

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit reinem CSS den Animationseffekt des Öffnens und Schließens eines Regenschirms (Quellcode im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!