How to use pure CSS to implement the loader of the box (attached source)

This article brings you the content is about how to use pure CSS to implement the loader (with source code), there is a certain reference value, the need for friends can refer to, I hope you have some help.

Effect Preview

Source code Download

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

Code interpretation

To define the DOM, there are only 1 elements:

<div class= "Loader" ></div>

Center display:

body {    margin:0;    HEIGHT:100VH;    Display:flex;    Align-items:center;    Justify-content:center;    Background-color:teal;}

Draw a piece of wood:

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

Use a pseudo-element to draw a box on it:

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

Let the pattern tilt to form the effect of the box on the slope:

. loader {    transform:rotate ( -45deg);    Left:1em;    Top:1em;}

Next, make the animation.

Let the box step up, climb to the top of the slope and then re-climb:

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

Increase the scrolling effect of the box during the climbing process:

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

Increase the anthropomorphic effect of the box during the climbing process:

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

To make a wooden bar move when the box is near the vertex:

. loader {    animation:throw 3s infinite;    transform-origin:20%;} @keyframes Throw {    0, 70%, 100% {        transform:rotate ( -45deg);    }    80% {        transform:rotate ( -135deg);    }}

Increase the drop effect of the box as it climbs closer to the vertex:

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

Finally, hide the parts that might go beyond the page:

body {    Overflow:hidden;}

Done!