So erzielen Sie mit reinem CSS einen Animationseffekt ohne DOM-Elemente

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS, um einen Animationseffekt ohne DOM-Elemente zu erzielen. Ich hoffe, dass er für Sie hilfreich ist.

Effektvorschau

Codeinterpretation

Es gibt kein Dom-Element, schreiben Sie einfach CSS direkt.
Stellen Sie den Seitenabstand ein:

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

Legen Sie das Hintergrundmuster mit Pseudoelementen fest:

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;

Übersetzen Sie das Hintergrundmuster:

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

Lassen Sie das Hintergrundmuster rotieren:

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

Seite schwenken:

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

Seite zoomen:

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

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

Zum Schluss noch den Farbwechseleffekt hinzufügen:

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

Fertig!

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um einen bewegten weißen Kaninchen-Animationseffekt zu implementieren

So verwenden Sie reines CSS zur Implementierung ein sich bewegender Animationseffekt eines weißen Kaninchens. Lächelnder kleiner Mönch beim Meditieren

Das obige ist der detaillierte Inhalt vonSo erzielen Sie mit reinem CSS einen Animationseffekt ohne DOM-Elemente. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!