So erzielen Sie mit reinem CSS den Anzeigerahmeneffekt von Schmetterlingsexemplaren

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um den Anzeigerahmeneffekt von Schmetterlingsexemplaren zu realisieren. Ich hoffe, dass er für Sie hilfreich ist .

Effektvorschau

Quellcode-Download

Bitte laden Sie den vollständigen Quellcode des täglichen Frontends herunter Praktische Serie von Github Download:

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

Codeinterpretation

Definieren Sie Dom, der Container repräsentiert das ganzer Schmetterling, weil der Schmetterling symmetrisch ist, also in eine linke und rechte Seite unterteilt ist, jede Seite hat 3 Unterelemente:

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

Zentrierte Anzeige:

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

Definieren Sie die Größe des Schmetterling:

.butterfly {
    position: relative;
    width: 10em;
    height: 10em;
}

Zeichne zuerst die linke Hälfte:

.butterfly .left {
    position: absolute;
    width: inherit;
    height: inherit;
}

Verwende das 1. Unterelement, um den oberen Teil des Flügels zu zeichnen:

.butterfly span {
    position: absolute;
    border-radius: 50%;
}

.butterfly span:nth-child(1) {
    width: 5em;
    height: 7em;
    background-color: gold;
}

Verwende das 2. Unterelement So zeichnen Sie den unteren Teil des Flügels:

.butterfly span:nth-child(2) {
    width: 5.5em;
    height: 3.5em;
    background-color: orangered;
    top: 5em;
    left: -2.5em;
    filter: opacity(0.6);
}

Verwenden Sie das 2. Unterelement, um den unteren Teil des Flügels zu zeichnen: Zeichnen Sie Tentakel mit 3 Unterelementen:

.butterfly span:nth-child(3) {
    width: 6em;
    height: 6em;
    border-right: 0.3em solid orangered;
    top: -0.5em;
}

Kopieren Sie die linke Hälfte zur rechten Hälfte:

.butterfly .right {
    position: absolute;
    width: inherit;
    height: inherit;
}

.butterfly .right {
    transform: rotateY(180deg) rotate(-90deg);
    top: 0.4em;
    left: 0.4em;
}

Legen Sie die Probe in den Anzeigerahmen:

.butterfly::before {
    content: '';
    position: absolute;
    box-sizing: border-box;
    top: -2.5em;
    left: -8em;
    width: 24em;
    height: 18em;
    background-color: black;
      border: 0.2em inset silver;
}

.butterfly::after {
    content: '';
    position: absolute;
    box-sizing: border-box;
    width: 40em;
    height: 30em;
    background-color: lightyellow;
    top: -9em;
    left: -16em;
    border: 2em solid burlywood;
    border-radius: 3em;
    box-shadow: 
        0 0.3em 2em 0.4em rgba(0, 0, 0, 0.3),
        inset 0.4em 0.4em 0.1em 0.5em rgba(0, 0, 0, .4);
    z-index: -1;
}

Zuletzt justieren Sie sie. Verschiebung aufgrund der Musterneigung:

.butterfly {
    transform: translateX(1em);
}

Sie sind fertig!

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um den Animationseffekt der Windows-Startoberfläche zu realisieren

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit reinem CSS den Anzeigerahmeneffekt von Schmetterlingsexemplaren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!