纯css实现机器人走路动画

由于发现了css的这个现象

当一个有元素嵌套的时候，父元素有动画，子元素也有动画，那么子元素的运动会相对父元素的运动而运动

所以我忽然想到，实现人的走路动画并不是不可能的了。

我开始搭建人体的结构，让人的每一个发生运动了的部分都设置为一个单独的盒子。

然后编辑和调整动画代码，一边站起来自己比划动作比对一边写代码。

终于，今天，大二，我实现了小学时候想用flash做出人体走路动画。

然后我开始又继续添加东西，把这个人改成了拿着剑一边挥舞一边走路的机器人。

蛮有趣的，就是代码写的比较冗长。

效果图展示

walk.gif

2021-7-15_16-35-34.png

完整源代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>一个机器人走路动画</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        /* 头部动画 */
        @keyframes head {
            /*transform: translateY(-80px);*/
            25% {
                transform: translateY(-5px) translateX(-5px);
            }
            50% {
                transform: translateY(-0px) translateX(0);
            }
            75% {
                transform: translateY(-5px) translateX(5px);
            }
        }

        /* 眼部闪光动画 */
        @keyframes eyeAni {
            25% {
                box-shadow: black 0 0 20px;
                background-color: blue;
            }
            50% {

            }
            75% {
                box-shadow: black 0 0 20px;
                background-color: red;
            }
        }

        /* 身体上下动画 */
        @keyframes bodyUpDown {
            25% {
                transform: translateY(-10px);
            }
            50% {
                transform: translateY(0);
            }
            75% {
                transform: translateY(-10px);
            }
        }

        /* 大臂1动画 */
        @keyframes rootArm1 {
            25% {
                transform: translateY(20px) rotate(0deg);
            }
            50% {
                transform: translateY(20px) rotate(30deg);
            }
            75% {
                transform: translateY(20px) rotate(0deg);
            }
        }

        /* 大臂2动画 */
        @keyframes rootArm2 {
            25% {
                transform: translateY(20px) rotate(0deg);
            }
            50% {
                transform: translateY(20px) rotate(-30deg);
            }
            75% {
                transform: translateY(20px) rotate(0deg);
            }
        }

        /* 小臂1动画 */
        @keyframes subArm1 {
            50% {
                transform: rotate(30deg);
            }
        }

        /* 小臂2动画 */
        @keyframes subArm2 {
            50% {
                transform: rotate(0deg);
            }
        }

        /* 大腿1动画 */
        @keyframes rootLegWalk1 {
            /* 最开始  rotate(-5deg);*/
            25% {
                transform: rotate(-15deg);
            }
            50% {
                transform: rotate(5deg);
            }
            75% {
                transform: rotate(30deg);
            }
        }

        /* 小腿1动画 */
        @keyframes subLegWalk1 {
            /* 最开始 transform: rotate(-10deg);*/
            25% {
                top: 80%;
                transform: rotate(0deg);
                background-color: skyblue;
            }
            50% {
                top: 70%;
                background-color: red;
                transform: rotate(-30deg);
            }
            75% {
                top: 80%;
                background-color: deeppink;
                transform: rotate(-15deg);
            }
        }

        /* 大腿2动画 */
        @keyframes rootLegWalk2 {
            25% {
                /*向前迈*/
                transform: rotate(30deg);
            }
            50% {
                /*踩下去*/
                transform: rotate(5deg);
            }
            75% {
                /*往后登*/
                transform: rotate(-15deg);
            }
        }

        /* 小腿2动画 */
        @keyframes subLegWalk2 {
            25% {
                top: 80%;
                transform: rotate(-30deg);
                background-color: transparent;
            }
            50% {
                top: 80%;
                background-color: red;
                transform: rotate(-5deg);
            }
            75% {
                top: 80%;
                background-color: transparent;
                transform: rotate(0deg);
            }
        }

        /* 脚丫1动画 */
        @keyframes foot1 {
            25% {
                transform: rotate(-5deg);
            }
            50% {
                transform: translateX(10px);
            }
            75% {
                transform: rotate(10deg);
            }
        }

        /* 脚丫2动画 */
        @keyframes foot2 {
            25% {
                transform: rotate(20deg);
            }
            50% {
                transform: translateX(10px);
            }
            75% {
                transform: rotate(10deg);
            }
        }

        /* 剑光动画 */
        @keyframes weaponLightAni {
            25% {
                width: 30px;
                height: 0;
            }
            50% {
                box-shadow: pink 0 0 40px;
                /*transform: translateX(10px);*/
            }
            75% {
                box-shadow: yellow 0 0 100px;
                /*transform: rotate(10deg);*/
            }
        }

        /* 剑动画 */
        @keyframes weaponAni {
            50% {
                transform: rotate(-360deg);
            }
            100% {
                transform: rotate(-720deg);
            }
        }

        .body {
            width: 70px;
            height: 200px;
            position: relative;
            left: 40%;
            margin-top: 20vh;
            border: solid 5px;
            border-radius: 60px;
            animation: bodyUpDown 2s infinite;
        }

        .eye {
            width: 25px;
            height: 10px;
            position: absolute;
            left: 5px;
            top: 30%;
            border-top-left-radius: 100px;
            border-bottom-right-radius: 100px;
            background-color: deeppink;
            animation: eyeAni 2s infinite;
        }

        .head {
            width: 80px;
            height: 80px;
            position: absolute;
            border: solid 5px;
            margin-left: -10px;
            transform-origin: center bottom;
            margin-top: -70px;
            border-top-left-radius: 30px;
            border-bottom-right-radius: 50px;
            animation: head 2s infinite;
        }

        .arm1, .arm2, .arm11, .arm22, .leg1, .leg2, .leg11, .leg22, .foot1, .foot2 {
            border-top-left-radius: 30px;
            border-top-right-radius: 30px;
        }

        .arm1 {
            width: 42px;
            height: 160px;
            border: solid 5px;
            position: absolute;
            transform-origin: center top;
            margin-left: 10px;
            transform: translateY(20px) rotate(-30deg);
            animation: rootArm1 2s infinite;
        }

        .arm11 {
            width: 90%;
            height: 90%;
            border: solid 3px;
            top: 80%;
            position: absolute;
            transform-origin: center top;
            transform: rotate(0deg);
            animation: subArm1 2s infinite;
        }

        .arm2 {
            width: 100px;
            height: 160px;
            border: solid 5px;
            position: absolute;
            transform-origin: center top;
            margin-left: -20px;
            transform: translateY(20px) rotate(30deg);
            opacity: 0.3;
            animation: rootArm2 2s infinite;
        }

        .leg1 {
            width: 50px;
            height: 90%;
            border: solid 5px;
            position: absolute;
            top: 80%;
            left: 40%;
            transform-origin: center top;
            transform: rotate(5deg);
            animation: rootLegWalk1 2s infinite;
        }

        .arm22 {
            width: 90%;
            height: 90%;
            border: 3px solid;
            border-bottom-right-radius: 100px;
            border-bottom-width: 15px;
            top: 80%;
            position: absolute;
            transform-origin: center top;
            transform: rotate(30deg);
            animation: subArm2 2s infinite;
        }

        .leg11 {
            width: 90%;
            height: 90%;
            border: solid 4px;
            position: absolute;
            top: 80%;
            transform-origin: center top;
            transform: rotate(-10deg);
            animation: subLegWalk1 2s infinite;
        }

        .foot1 {
            width: 80px;
            height: 30px;
            position: absolute;
            right: 0;
            bottom: -3px;
            border: solid 3px;
            border-top-left-radius: 40px;
            transform-origin: right center;
            animation: foot1 2s infinite;
        }

        .leg2 {
            width: 50px;
            height: 90%;
            border: solid 5px;
            position: absolute;
            top: 80%;
            left: 10%;
            opacity: 0.3;
            transform-origin: top center;
            transform: rotate(-5deg);
            animation: rootLegWalk2 2s infinite;
        }

        .leg22 {
            width: 90%;
            height: 90%;
            border: solid 4px;
            position: absolute;
            top: 70%;
            transform-origin: top center;
            transform: rotate(-30deg);
            animation: subLegWalk2 2s infinite;
        }

        .foot2 {
            width: 80px;
            height: 30px;
            position: absolute;
            right: 0;
            bottom: -3px;
            border: solid 3px;
            border-top-left-radius: 40px;
            animation: foot2 2s infinite;
        }

        .finger1, .finger2, .finger3, .finger4, .finger5 {
            width: 5px;
            height: 30px;
            border: solid 2px;
            position: absolute;
            transform-origin: top center;
            top: 95%;
        }

        .finger1 {
            left: 20%;
        }

        .finger2 {
            left: 40%;
        }

        .finger3 {
            left: 60%;
        }

        .finger4 {
            left: 80%;
        }

        .finger5 {
            left: 0;
            width: 10px;
            height: 15px;
            transform: rotate(30deg);
        }

        .weapon {
            width: 60px;
            height: 20px;
            position: absolute;
            right: -20px;
            bottom: -20px;
            border: solid 2px;
            transform-origin: 20px center;
            animation: weaponAni 2s infinite;
        }

        .light {
            width: 300px;
            height: 40px;
            position: absolute;
            right: 60px;
            background-color: hotpink;
            border-bottom-left-radius: 100px;
            animation: weaponLightAni 2s infinite;
        }

    </style>
</head>

<body>
<div class="body">
    <div class="head">
        <div class="eye"></div>
    </div>
    <div class="arm1">
        <div class="arm11">
            <div class="finger1"></div>
            <div class="finger2"></div>
            <div class="finger3"></div>
            <div class="finger4"></div>
            <div class="finger5"></div>
            <div class="weapon">
                <div class="light"></div>
            </div>
        </div>
    </div>
    <div class="arm2">
        <div class="arm22"></div>
    </div>
    <div class="leg1">
        <div class="leg11">
            <div class="foot1"></div>
        </div>
    </div>
    <div class="leg2">
        <div class="leg22">
            <div class="foot2"></div>
        </div>
    </div>
</div>
</body>

</html>