Comment utiliser du CSS pur pour obtenir l'effet d'animation de l'ouverture et de la fermeture d'un parapluie (code source ci-joint)

Le contenu de cet article explique comment utiliser du CSS pur pour réaliser l'effet d'animation de l'ouverture et de la fermeture d'un parapluie (code source ci-joint). Les amis dans le besoin peuvent s'y référer. j'espère que cela vous aidera.

Aperçu de l'effet

Téléchargement du code source

https://github.com/comehope/front- défis-de-fin-quotidienne

Interprétation du code

définit dom, le conteneur .umbralla contient 2 éléments, .canopy représente la housse du parapluie, .shaft poignée du parapluie :

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

Affichage centré :

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

Définissez les attributs communs du pseudo-élément :

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

Dessinez d'abord un parapluie ouvert.
Définissez la taille du conteneur. La valeur de l'attribut font-size sera utilisée plus tard, donc une variable est définie :

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

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

Définissez la taille de la housse du parapluie :

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

Utilisez le pseudo élément ::before pour dessiner la partie supérieure de la housse du parapluie. Dessinez d'abord un demi-cercle puis compressez-le dans le sens vertical :

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

Utilisez le pseudo élément ::after. pour dessiner la partie inférieure du couvercle du parapluie. Demi-partie :

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

Dessinez le long mât du manche du parapluie :

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

Utilisez des pseudo-éléments pour dessiner la pointe du haut. du mât du parapluie exposant la housse du parapluie. La méthode est la même que pour dessiner sur la housse du parapluie. La moitié est similaire, dessinez d'abord le demi-cercle, puis compressez-le dans le sens horizontal :

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

. Dessinez la poignée en forme de crochet du parapluie :

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

À ce stade, le parapluie est ouvert. Ensuite, dessinez la forme du parapluie lorsqu'il est fermé par déformation.
Fermez d'abord la verrière en la comprimant dans le sens horizontal et en l'étirant dans le sens vertical :

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

Cachez la partie inférieure de la verrière :

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

Laissez le inclinaison du parapluie, car le parapluie vertical est un peu terne, alors ajoutez un peu de changement :

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

À ce stade, le parapluie ressemble à ce qu'il est lorsqu'il est fermé. Ensuite, il doit être transformé en bascule. contrôle. .
Ajoutez un contrôle checkbox dans le dom :

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

Réglez le contrôle pour qu'il soit aussi grand que le parapluie et placez-le au-dessus du calque du parapluie :

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

checkbox L'état non sélectionné du champ correspond à l'apparence du parapluie à la fermeture, qui est l'apparence actuelle du parapluie, il vous suffit donc de préciser l'apparence du parapluie à l'ouverture correspondant à l'apparence sélectionnée. état du contrôle. La fermeture du parapluie étant obtenue par déformation de plusieurs éléments, le passage à l'état ouvert du parapluie annule la déformation.
Tout d'abord, laissez le parapluie avancer :

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

Puis ouvrez le couvercle du parapluie :

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

Montrez ensuite la partie inférieure du couvercle du parapluie :

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

Enfin, définissez les effets d'assouplissement des éléments ci-dessus :

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

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!