So verwenden Sie reines CSS, um eine Umschaltsteuerung im Flugzeug-Bullaugen-Stil zu implementieren-CSS-Tutorial-php.cn

So verwenden Sie reines CSS, um eine Umschaltsteuerung im Flugzeug-Bullaugen-Stil zu implementieren

不言

Freigeben： 2018-10-16 14:51:27

nach vorne

2261 Leute haben es durchsucht

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS zur Implementierung einer Umschaltsteuerung im Flugzeug-Bullaugen-Stil. Ich hoffe, dass er für Sie hilfreich ist.

Effektvorschau

So verwenden Sie reines CSS, um eine Umschaltsteuerung im Flugzeug-Bullaugen-Stil zu implementieren

Quellcode-Download

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

Codeinterpretation

definiert Dom, .windows Container stellt Bullauge dar und sein untergeordnetes Element .curtain stellt Vorhang dar:

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

Nach dem Login kopieren

Zentrierte Anzeige:

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

Nach dem Login kopieren

Legen Sie die Größe der Bullaugen fest. Da die Schriftgröße später verwendet wird, wird die Schriftgröße mit einer Variablen definiert:

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

.window {
    position: relative;
    box-sizing: border-box;
    width: 25em;
    height: 35em;
    font-size: var(--font-size);
    background-color: #d9d9d9;
}

Nach dem Login kopieren

Zeichnen Sie einen dicken Fensterrahmen mit Schatten:

.window {
    border-radius: 5em;
    box-shadow: 
        inset 0 0 8em rgba(0, 0, 0, 0.2),
        0 0 0 0.4em #808080,
        0 0 0 4em whitesmoke,
        0 0 0 4.4em #808080,
        0 2em 4em 4em rgba(0, 0, 0, 0.1);
}

Nach dem Login kopieren

Stellen Sie den Vorhangstil ein, der die gleiche Größe wie das Fenster hat, aber nicht nach unten gezogen wird:

.window .curtain {
    position: absolute;
    width: inherit;
    height: inherit;
    border-radius: 5em;
    box-shadow:
        0 0 0 0.5em #808080,
        0 0 3em rgba(0, 0, 0, 0.4);
    background-color: whitesmoke;
    left: 0;
    top: -5%;
}

Nach dem Login kopieren

Zeichnen Sie mithilfe von Pseudoelementen Anzeigelampen auf die Vorhänge, die rot aufleuchten, wenn die Vorhänge geschlossen sind :

.window .curtain::before {
    content: '';
    position: absolute;
    width: 40%;
    height: 0.8em;
    background-color: #808080;
    left: 30%;
    bottom: 1.6em;
    border-radius: 0.4em;
}

.window .curtain::after {
    content: '';
    position: absolute;
    width: 1.6em;
    height: 0.8em;
    background-image: radial-gradient(orange, orangered);
    bottom: 1.6em;
    border-radius: 0.4em;
    left: calc((100% - 1.6em) / 2);
}

Nach dem Login kopieren

Das Obige gilt, wenn das Bullauge geschlossen ist. Als nächstes zeichnen Sie den Effekt, wenn das Bullauge geöffnet ist.
Fügen Sie zuerst ein checkbox im Dom hinzu. Wenn es checked ist, bedeutet dies, dass das Bullauge geöffnet ist:


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

Nach dem Login kopieren

Verstecken Sie checkbox, um das Element unsichtbar zu machen Unten kann weiterhin interagiert werden. Stellen Sie die Größe auf die Größe des Bullauges ein und die Ebene befindet sich über dem Bullauge. Der Effekt besteht darin, dass Sie tatsächlich auf opacity(0) klicken: checkbox

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

Nach dem Login kopieren

Wenn das Bullauge geöffnet ist,

Um nach oben zu gehen und die Anzeigelampe grün leuchtet: .curtain

.window .curtain {
    transition: 0.5s ease-in-out;
}

.toggle:checked ~ .window .curtain {
    top: -90%;
}

.toggle:checked ~ .window .curtain::after {
    background-image: radial-gradient(lightgreen, limegreen);
}

Nach dem Login kopieren

Verstecken Sie den Teil hinter dem Fenster:

.window {
    overflow: hidden;
}

Nach dem Login kopieren

Zeichnen Sie als Nächstes die Szenerie außerhalb des Bullauges.

Fügen Sie das
-Element hinzu, das Wolken im Dom darstellt, und die 5 .clouds-Unterelemente stellen jeweils eine weiße Wolke dar: <span></span>

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

Nach dem Login kopieren

Verwenden Sie den Wolkencontainer, um den blauen Himmel außerhalb des Fensters zu zeichnen:

.window .clouds {
    position: relative;
    width: 20em;
    height: 30em;
    background-color: deepskyblue;
    box-shadow: 0 0 0 0.4em #808080;
    left: calc((100% - 20em) / 2);
    top: calc((100% - 30em) / 2);
    border-radius: 7em;
}

Nach dem Login kopieren

Jede Wolke besteht aus 3 Teilen. Zeichnen Sie zuerst den größten Teil:

.clouds span {
    position: absolute;
    width: 10em;
    height: 4em;
    background-color: white;
    top: 20%;
    border-radius: 4em;
}

Nach dem Login kopieren

Zeichnen Sie dann mit Pseudoelementen zwei hervorstehende Bögen:

.clouds span::before,
.clouds span::after {
    content: '';
    position: absolute;
    width: 4em;
    height: 4em;
    background-color: white;
    border-radius: 50%;
}

.clouds span::before {
    top: -2em;
    left: 2em;
}

.clouds span::after {
    top: -1em;
    right: 1em;
}

Nach dem Login kopieren

Erhöhen Sie den Animationseffekt von die schwebenden Wolken:

.clouds span {
    animation: move 4s linear infinite;
}

@keyframes move {
    from {
        left: -150%;
    }

    to {
        left: 150%;
    }
}

Nach dem Login kopieren

Nehmen Sie einige Änderungen an der Größe und Position jeder Wolke vor:

.clouds span:nth-child(2) {
    top: 40%;
    animation-delay: -1s;
}

.clouds span:nth-child(3) {
    top: 60%;
    animation-delay: -0.5s;
}

.clouds span:nth-child(4) {
    top: 20%;
    transform: scale(2);
    animation-delay: -1.5s;
}

.clouds span:nth-child(5) {
    top: 70%;
    transform: scale(1.5);
    animation-delay: -3s;
}

Nach dem Login kopieren

Verstecken Sie abschließend den Inhalt außerhalb des Containers:

.window .clouds {
    overflow: hidden;
}

Nach dem Login kopieren

Sie sind fertig !

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reines CSS, um eine Umschaltsteuerung im Flugzeug-Bullaugen-Stil zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!