Comment utiliser du CSS pur pour implémenter un contrôle à bascule de style hublot d'avion-tutoriel CSS-php.cn

Comment utiliser du CSS pur pour implémenter un contrôle à bascule de style hublot d'avion

不言

Libérer： 2018-10-16 14:51:27

avant

2185 Les gens l'ont consulté

Le contenu de cet article explique comment utiliser du CSS pur pour implémenter un contrôle à bascule de style hublot d'avion. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Aperçu de l'effet

Comment utiliser du CSS pur pour implémenter un contrôle à bascule de style hublot davion

Téléchargement du code source

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

Interprétation du code

définit dom, .windows le conteneur représente le hublot, et son élément enfant .curtain représente le rideau :

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

Copier après la connexion

est affiché au centre :

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

Copier après la connexion

Définir la taille des hublots La taille de police étant utilisée ultérieurement, la taille de police est définie avec une variable :

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

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

Copier après la connexion

Dessinez un épais. cadre de fenêtre avec ombre :

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

Copier après la connexion

Définissez le style du rideau sur la même taille que la fenêtre, mais ne le tirez pas complètement :

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

Copier après la connexion

Utilisez des pseudo-éléments pour dessiner l'indicateur lumières sur les rideaux, qui s'allumeront en rouge lorsque les rideaux sont fermés :

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

Copier après la connexion

Voici à quoi ressemble le hublot lorsqu'il est fermé. Ensuite, dessinez l'effet lorsque le hublot est ouvert.
Ajoutez d'abord un checkbox dans le dom. Lorsqu'il est checked, cela signifie que le hublot est ouvert :


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

Copier après la connexion

Cacher checkbox Utilisez opacity(0) pour rendre l'élément invisible. . Il est toujours possible d'interagir avec lui dans l'état. Définissez sa taille pour qu'elle soit aussi grande que le hublot, et le calque est au-dessus du hublot. L'effet est que lorsque vous cliquez sur le hublot, vous cliquez en fait sur checkbox :

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

Copier après la connexion

Lorsque Lorsque le hublot est ouvert,

doit se déplacer vers le haut et le voyant s'allume en vert : .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);
}

Copier après la connexion

Masquer la partie au-delà de la fenêtre :

.window {
    overflow: hidden;
}

Copier après la connexion

Ensuite, dessinez le décor à l'extérieur du hublot.

Ajoutez l'élément
représentant les nuages dans le dom, et les 5 sous-éléments .clouds représentent chacun un nuage blanc : <span></span>

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

Copier après la connexion

Utilisez le conteneur nuage pour dessiner le ciel bleu à l'extérieur du fenêtre :

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

Copier après la connexion

Chaque nuage est composé de 3 parties. Dessinez d'abord la plus grande partie :

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

Copier après la connexion

Utilisez ensuite des pseudo éléments pour dessiner 2 arcs saillants :

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

Copier après la connexion

Ajoutez l'effet d'animation des nuages flottants :

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

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

    to {
        left: 150%;
    }
}

Copier après la connexion

Apportez quelques modifications à la taille et à la position de chaque nuage :

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

Copier après la connexion

Enfin, masquez le contenu à l'extérieur du conteneur :

.window .clouds {
    overflow: hidden;
}

Copier après la connexion

Fait !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment utiliser du CSS pur pour implémenter un contrôle à bascule de style hublot d'avion

Aperçu de l'effet

Téléchargement du code source

Interprétation du code