Comment utiliser du CSS pur pour obtenir un effet d'animation agitant un drapeau (code source ci-joint)-tutoriel CSS-php.cn

Comment utiliser du CSS pur pour obtenir un effet d'animation agitant un drapeau (code source ci-joint)

不言

Libérer： 2018-09-04 11:04:59

original

3769 Les gens l'ont consulté

Le contenu de cet article explique comment utiliser du CSS pur pour obtenir un effet d'animation agitant un drapeau (code source ci-joint). J'espère qu'il le fera. vous être utile.

Aperçu de l'effet

Comment utiliser du CSS pur pour obtenir un effet danimation agitant un drapeau (code source ci-joint)

Téléchargement du code source

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

Interprétation du code

Définir dom, contenant 15 éléments dans le conteneur :

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

Copier après la connexion

Affichage centré :

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

Copier après la connexion

Définir la taille du conteneur :

.flag {
    width: 10em;
    height: 15em;
    font-size: 20px;
}

Copier après la connexion

Définir le style de ligne :

.flag span {
    width: 0.25em;
    height: inherit;
    background-color: deepskyblue;
}

Copier après la connexion

Rendre la ligne en mosaïque :

.flag {
    display: flex;
    justify-content: space-between;
}

Copier après la connexion

Ajouter un effet de perspective 3D :

.flag {
    transform: perspective(500px) rotateY(-20deg);
}

Copier après la connexion

Définissez l'effet d'animation du mouvement gauche et droit :

.flag span {
    animation: wave 1.5s ease-in-out infinite alternate;
}

@keyframes wave {
    to {
        transform: translateX(2em);
    }
}

Copier après la connexion

Définissez la valeur de la variable de l'élément :

.flag span:nth-child(1) {
    --n: 1;
}

.flag span:nth-child(2) {
    --n: 2;
}

/* 共 15 个元素，每元素的 --n 变量值等于它的序号。 */
/* 中间代码略 …… */

.flag span:nth-child(14) {
    --n: 14;
}

.flag span:nth-child(15) {
    --n: 15;
}

Copier après la connexion

Laissez chaque ligne démarrer l'animation avec un délai pour former un effet agitant le drapeau :

.flag span {
    animation-delay: calc(var(--n) * -0.1s);
}

Copier après la connexion

Enfin, ajoutez les effets de lumière et d'ombre :

.flag span {
    background-color: ghostwhite;
}

@keyframes wave {
    to {
        transform: translateX(2em);
        background-color: deepskyblue;
    }
}

Copier après la connexion

Vous avez terminé !

Recommandations associées :

Comment utiliser du CSS pur pour obtenir l'effet de survol du bouton de la balle se transformant en arrière-plan rectangulaire (code source joint)

Comment utiliser CSS et D3 pour implémenter une animation interactive de petits poissons nageant (avec code)

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!