So verwenden Sie reines CSS, um einen Box-Throwing-Loader zu implementieren (Quellcode im Anhang)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS zur Implementierung eines Box-Throwing-Loaders (Quellcode im Anhang). Ich hoffe, dass er für Sie hilfreich ist .

Effektvorschau

Quellcode-Download

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

Code-Interpretation

Dom definieren, nur 1 Element:

<div></div>

Zentrierte Anzeige:

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

Zeichnen Sie einen Holzstreifen:

.loader {
    width: 6em;
    border-bottom: 0.25em solid white;
    font-size: 30px;
    border-radius: 0.125em;
}

Zeichnen ein Kästchen darüber mit einem Pseudoelement:

.loader {
    position: relative;
}

.loader::before {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    border: 0.25em solid white;
    bottom: 0;
    left: 0.5em;
    border-radius: 0.25em;
}

Neigen Sie das Muster und erzeugen Sie den Effekt eines Kästchens auf einer Schräge:

.loader {
    transform: rotate(-45deg);
    left: 1em;
    top: 1em;
}

Als nächstes animieren Sie es.

Lassen Sie die Box Schritt für Schritt den Hang hinaufsteigen, klettern Sie bis zur Spitze des Hangs und steigen Sie dann erneut auf:

.loader::before {
    animation: push 3s infinite;
}

@keyframes push {
    0% {
        transform: translateX(0);
    }
    
    20%, 25% {
        transform: translateX(1em);
    }

    40%, 45% {
        transform: translateX(2em);
    }

    60%, 65% {
        transform: translateX(3em);
    }

    80% {
        transform: translateX(0);
    }
}

Erhöhen Sie den Rolleffekt der Box während des Aufstiegs:

@keyframes push {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    
    20%, 25% {
        transform: translateX(1em) rotate(calc(90deg * 1));
    }

    40%, 45% {
        transform: translateX(2em) rotate(calc(90deg * 2));
    }

    60%, 65% {
        transform: translateX(3em) rotate(calc(90deg * 3));
    }

    80% {
        transform: translateX(0) rotate(0deg);
    }
}

Erhöhen Sie den anthropomorphen Effekt der Box beim Klettern:

@keyframes push {
    0% {
        transform: translateX(0) rotate(0deg);
    }

    5% {
        transform: translateX(0) rotate(-5deg);
    }
    
    20%, 25% {
        transform: translateX(1em) rotate(calc(90deg * 1 + 5deg));
    }

    30% {
        transform: translateX(1em) rotate(calc(90deg * 1 - 5deg));
    }

    40%, 45% {
        transform: translateX(2em) rotate(calc(90deg * 2 + 5deg));
    }

    50% {
        transform: translateX(2em) rotate(calc(90deg * 2 - 5deg));
    }

    60%, 65% {
        transform: translateX(3em) rotate(calc(90deg * 3 + 5deg));
    }

    70% {
        transform: translateX(3em) rotate(calc(90deg * 3 - 5deg));
    }

    80% {
        transform: translateX(0) rotate(-5deg);
    }
}

Lassen Sie die Holzstange eine Wurfbewegung ausführen, wenn die Box nahe an die Spitze klettert:

.loader {
    animation: throw 3s infinite;
    transform-origin: 20%;
}

@keyframes throw {
    0%, 70%, 100% {
        transform: rotate(-45deg);
    }

    80% {
        transform: rotate(-135deg);
    }
}

Erhöhen Sie den Falleffekt der Box wenn es nahe an die Spitze klettert:

@keyframes push {
    70% {
        transform: translateX(3em) translateY(0) rotate(calc(90deg * 3 - 5deg)) scale(1);
        filter: opacity(1);
    }

    80% {
        transform: translateX(0) translateY(-5em) rotate(-5deg) scale(0);
        filter: opacity(0.5);
    }

    90% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(0);
    }
}

Zum Schluss die Teile ausblenden, die möglicherweise über die Seite hinausragen:

body {
    overflow: hidden;
}

Fertig!

Verwandte Empfehlungen:

So verwenden Sie reines CSS, um den Animationseffekt einer allein gehenden Person zu erzielen (Quellcode im Anhang)

Wie man mit reinem CSS einen Papierkran implementiert (Quellcode im Anhang)

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reines CSS, um einen Box-Throwing-Loader zu implementieren (Quellcode im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!