How to use pure CSS to animate an animation without DOM elements

This article brings you the content is about how to use pure CSS to achieve a non-dom elements of the animation effect, there is a certain reference value, the need for friends can refer to, I hope to help you.

Effect Preview

Code interpretation

Without DOM elements, write CSS directly.
To set the page space:

body {    position:fixed;    margin:0;    WIDTH:100VW;    HEIGHT:100VH;}

To set a 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;

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

To make the background pattern spin up:

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

To pan a page:

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

To zoom the page:

Body {    Animation:         3s move infinite ease-in-out alternate,        3s zoom infinite ease-in-out alternate;} @keyframes Zoom {To    {        transform:scale;    }}

Finally, add color effects:

@keyframes Rotating {To    {        transform:rotate (180deg);        Filter:hue-rotate (1turn);    }}

Done!