Comment utiliser du CSS pur pour obtenir un effet d'animation sans éléments DOM

Le contenu de cet article explique comment utiliser du CSS pur pour obtenir un effet d'animation sans éléments DOM. 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

Interprétation du code

Il n'y a pas d'élément dom, écrivez simplement du CSS directement.
Définissez l'espace de la page :

body {
    position: fixed;
    margin: 0;
    width: 100vw;
    height: 100vh;
}

Définissez le motif de fond avec des pseudo-éléments :

body::before {
    content: '';
    position: fixed;
    width: 200vmax;
    height: 200vmax;
    background-color: steelblue;
    color: turquoise;
    background-image: 
        linear-gradient(
            45deg, 
            currentColor 25%, 
            transparent 25%, transparent 75%, 
            currentColor 75%),
        linear-gradient(
            45deg, 
            currentColor 25%, 
            transparent 25%, transparent 75%, 
            currentColor 75%);
    background-position: 0 0, 5vmax 5vmax;
    background-size: 10vmax 10vmax;

Traduisez le motif de fond :

body::before {
    top: 50%;
    left: 50%;
    animation: 
        9s move infinite ease-in-out alternate;
}

@keyframes move {
    from {
        left: -40%;
        top: -40%;
    }

    to {
        left: -60%;
        top: -60%;
    }
}

Laissez le rotation du motif de fond :

body::before {
    animation: 
        9s move infinite ease-in-out alternate,
        9s -1.5s rotating infinite ease-in-out alternate;
}

@keyframes rotating {
    to {
        transform: rotate(180deg);
    }
}

Déplacement panoramique de la page :

body {
    top: 50%;
    left: 50%;
    animation: 
        3s move infinite ease-in-out alternate;
}

Zoom sur la page :

body {
    animation: 
        3s move infinite ease-in-out alternate,
        3s zoom infinite ease-in-out alternate;
}

@keyframes zoom {
    to {
        transform: scale(10);
    }
}

Enfin, ajoutez l'effet de changement de couleur :

@keyframes rotating {
    to {
        transform: rotate(180deg);
        filter: hue-rotate(1turn);
    }
}

Vous avez terminé !

Recommandations associées :

Comment utiliser du CSS pur pour implémenter un effet d'animation de lapin blanc en mouvement

Comment utiliser du CSS pur pour implémenter un effet d'animation de lapin blanc en mouvement Petit moine souriant méditant

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!