展示

CSS动画——行走的小人_less

html 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index.css">
    <title>Document</title>
</head>

<body>
    <header class="head">
        <div class="cricle">
            <div class="hat"></div>
            <div class="ball"></div>
        </div>
    </header>
    <div class="main">
        <div class="body">
            <div class="neck"></div>
            <div class="left-hand"></div>
            <div class="right-hand"></div>
            <div class="left-leg"></div>
            <div class="right-leg"></div>
        </div>
    </div>

</body>

</html>
css 
* {
    margin    : 0;
    padding   : 0;
    box-sizing: border-box;
}

body {
    background-color: darkgray;
    padding         : 100px 0 0 100px;
}

.head {
    width    : 100px;
    height   : 110px;
    animation: moveX 7s forwards;
}

.cricle {
    width        : 100px;
    height       : 100px;
    border       : 4px solid #fff;
    border-radius: 50%;
    transform    : translate(0, 0) rotate(0, 0);
    animation    : rotate 5s ease forwards;
}

.hat {
    transform              : translate(-12px, -10px) rotate(-10deg);
    width                  : 100px;
    height                 : 20px;
    background-color       : blueviolet;
    border-top-left-radius : 70%;
    border-top-right-radius: 70%;
}

.ball {
    transform       : translate(20px, -35px);
    width           : 20px;
    height          : 20px;
    background-color: red;
    border-radius   : 50%;
}

.main {
    position       : absolute;
    left           : 130px;
    transform-style: preserve-3d;
    animation      : moveX 7s forwards;
}

.body {
    width           : 40px;
    height          : 150px;
    background-color: #fff;
}

.neck {
    width           : 10px;
    height          : 20px;
    background-color: #fff;
    transform       : translateX(15px) translateY(-8px);
}

.left-hand,
.right-hand {
    position        : absolute;
    left            : 8px;
    width           : 15px;
    height          : 100px;
    background-color: red;
    border-radius   : 10px;
    transform-origin: top;

}

.left-hand {
    z-index  : -1;
    animation: left-hand-move 5s forwards;
}

.right-hand {
    animation: right-hand-move 5s forwards;

}


.left-leg,
.right-leg {
    position        : absolute;
    top             : 120px;
    left            : 10px;
    width           : 20px;
    height          : 200px;
    background-color: saddlebrown;
    border-radius   : 10px;
    transform-origin: top;
}

.left-leg::after,
.right-leg::after {
    position           : absolute;
    top                : 175px;
    left               : -1px;
    content            : "";
    /* display         : block; */
    width              : 50px;
    height             : 25px;
    background-color   : skyblue;
    border-radius      : 50px 50px 0 0;
}

.left-leg {
    z-index  : -1;
    animation: right-hand-move 5s forwards;
    transform: translateZ(3);

}

.right-leg {
    animation: left-hand-move 5s forwards;
    transform: translateZ(5);
}

@keyframes moveX {
    0% {
        transform: translateX(0px);

    }


    100% {
        transform: translateX(1000px);
    }

}

@keyframes rotate {
    0% {
        transform: rotate(-30deg);
    }

    25% {
        transform: rotate(30deg);
    }

    50% {
        transform: rotate(-30deg);
    }

    75% {
        transform: rotate(0deg);
    }
}

@keyframes left-hand-move {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(25deg);
    }

    50% {
        transform: rotate(-25deg);
    }

    75% {
        transform: rotate(25deg);
    }

    100% {
        transform: rotate(-25deg);
    }
}

@keyframes right-hand-move {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-25deg);
    }

    50% {
        transform: rotate(25deg);
    }

    75% {
        transform: rotate(-25deg);
    }

    100% {
        transform: rotate(25deg);
    }
}