Comment utiliser du CSS pur pour obtenir l'effet d'une montgolfière (code source ci-joint)

Le contenu de cet article explique comment utiliser du CSS pur pour obtenir l'effet d'une montgolfière (code source ci-joint). J'espère qu'il a une certaine valeur de référence. vous sera utile.

Aperçu de l'effet

Téléchargement du code source

https://github.com/comehope/front-end-daily -défis

Interprétation du code

définit dom, il y a 2 sous-éléments dans le conteneur, .envelope représente la housse du parapluie, .basket représente le panier suspendu :

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

est centré Affichage :

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

Définir la taille du conteneur, les éléments enfants .envelope et .basket Disposition centrée verticalement :

.balloon {
    width: 12em;
    height: 19em;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

Dessiner la housse du parapluie d'abord.
Définissez la taille de la verrière :

.envelope {
    position: relative;
    width: inherit;
    height: 16em;
}

La forme de la verrière est telle que l'extrémité supérieure est sphérique et l'extrémité inférieure est conique. Dans un plan bidimensionnel, la projection d'un cône. sur le plan se trouve un triangle isocèle, on trace donc d'abord un cercle sur la partie supérieure puis un triangle sur la partie inférieure.
Dessinez d'abord le cercle supérieur :

.envelope span {
    position: absolute;
    width: inherit;
    height: 12em;
    border-radius: 50%;
    color: orange;
    background-color: currentColor;
}

Ensuite, utilisez des pseudo-éléments pour dessiner le triangle isocèle inférieur :

.envelope span::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-width: 10em 5.5em 0 5.5em;
    border-style: solid;
    border-color: currentColor transparent transparent transparent;
    left: calc(50% - 5.5em);
    top: 8.45em;
}

.envelope Il y a 2 <span></span> éléments ci-dessous, laissez le deuxième <span></span> se déformer et changer de couleur, de sorte que la housse du parapluie forme un motif à rayures verticales :

.envelope span:nth-child(2) {
    transform: scaleX(0.4);
    filter: brightness(0.85) contrast(1.4);
}

Cachez la partie à l'extérieur du .envelope récipient et coupez le coin inférieur pointu du triangle :

.envelope {   
    overflow: hidden;
}

À ce stade, la housse du parapluie est terminée, puis le panier suspendu est dessiné.
Définissez les dimensions du panier suspendu :

.basket {
    position: relative;
    width: 2em;
    height: 3em;
}

Dessinez le panier à l'aide du pseudo-élément ::before :

.basket::before {
    content: '';
    position: absolute;
    width: inherit;
    height: 1.6em;
    background-color: peru;
    bottom: 0;
    border-radius: 0 0 0.5em 0.5em;
}

Dessinez le bord supérieur du panier à l'aide du ::after pseudo-élément : Il y a 4

éléments sous

.basket::after {
    content: '';
    position: absolute;
    width: 105%;
    height: 0.3em;
    background-color: saddlebrown;
    left: calc((100% - 105%) / 2);
    top: 1.3em;
    border-radius: 0.3em;
}

.basket<span></span>, représentant 4 câbles. Définissez leur style sur des lignes fines verticales :

.basket span {
    position: absolute;
    width: 0.1em;
    height: 1.5em;
    background-color: burlywood;
}

Position. les câbles et inclinez-les différemment :

.basket span {
    left: calc((var(--n) - 1) * 0.6em);
    transform-origin: bottom;
    transform: rotate(calc(var(--r) * 7deg));
}

.basket span:nth-child(1) { --n: 1; --r: -2; }
.basket span:nth-child(2) { --n: 2; --r: -1; }
.basket span:nth-child(3) { --n: 3; --r: 1; }
.basket span:nth-child(4) { --n: 4; --r: 2; }

Enfin, ajoutez l'effet d'animation légèrement flottant de la montgolfière :

.balloon {
    animation: drift 2s infinite alternate;
}

@keyframes drift {
    to {
        transform: translateY(-5%);
    }
}

Vous avez terminé !

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!