How to use pure CSS to achieve an animation effect without DOM elements

The content of this article is about how to use pure CSS to achieve an animation effect without DOM elements. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Effect preview

Code interpretation

There is no dom element, just write css directly.
Set the page space:

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

Set the background pattern with pseudo elements:

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;

Translate the background pattern:

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

Let the background pattern rotate:

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

Pan the page:

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

Zoom the page:

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

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

Finally, add the color change effect:

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

You’re done!

Related recommendations:

How to use pure CSS to realize a moving white rabbit animation effect

How to use pure CSS to realize a moving white rabbit animation effect Little monk smiling and meditating

The above is the detailed content of How to use pure CSS to achieve an animation effect without DOM elements. For more information, please follow other related articles on the PHP Chinese website!