纯CSS3实现人物跑步动画

此有趣的动画是我在今日头条看到一位作者编写的一个有趣动画效果，便由此仿照分享给大家，我看过之后发现跑步效果编写非常简单，观察跑步的人使用一条条线条勾勒出来，通过线条的弯曲和移动就能实现。
效果如下：

跑步的人.gif

下面让我们来看看具体实现代码
HTML部分代码：

<div class="container">
            <div class="person">
                <div class="head"></div>
                <div class="part arm one"></div>
                <div class="part arm two"></div>
                <div class="torso"></div>
                <div class="part leg one"></div>
                <div class="part foot one"></div>
                <div class="part leg two"></div>
                <div class="part foot two"></div>
            </div>
        </div>

CSS部分代码：

.container {
                height: 300px;
                width: 600px;
                background: #000000;
                margin:50px auto;
            }

            .person {
                position: absolute;
                height: 105px;
                width: 0;
                color: #fff;
                left: 400px;
                top: 159px;
                transform-origin: 50% 50% 0px;
                -webkit-animation: sprint 2s infinite ease-in;
            }

            .person .head:before {
                content: "";
                position: absolute;
                top: 0px;
                left: -10px;
                height: 2.7px;
                width: 42px;
                border-radius: 20%;
                border: 4px solid red;
                background-color: #ff0000;
                transform-origin: 50% 100% 0px;
                z-index: 90;
                
            }

            .person .head {
                position: absolute;
                top: -25px;
                left: -10px;
                height: 30px;
                width: 30px;
                border-radius: 50%;
                border: 4px solid white;
                transform-origin: 50% 100% 0px;
                z-index: 90;
                -webkit-animation: bob 2s infinite alternate;
            }

            .person .head:after {
                content: "";
                position: absolute;
                top: -12px;
                left: 4px;
                height: 12px;
                width: 15px;
                border-radius: 30%;
                border: 4px solid red;
                background-color: yellow;
                z-index: 90;
            }

            .person .torso {
                position: absolute;
                height: 60px;
                width: 1px;
                border-left: 2px solid white;
                left: 0px;
                top: 15px;
                z-index: 90;
            }

            .person .part {
                position: absolute;
                left: 3px;
                top: 75px;
                z-index: 90;
            }

            .person .part.arm {
                position: absolute;
                border-left: 3px solid #b5b8c5;
                border-bottom: 3px solid #b5b8c5;
                height: 45px;
                width: 39px;
                top: 15px;
                right: 300px;
                transform-origin: 0% 10% 0px;
                -webkit-animation: pump 1s infinite ease-in-out;
            }

            .person .part.arm.one {
                transform: rotate3d(0, 0, 1, -50deg);
            }

            .person .part.arm.two {
                transform: rotate3d(0, 0, 1, 70deg);
                animation-delay: .5s;
            }

            .person .part.leg {
                height: 57px;
                width: 60px;
                border-right: 3px solid #b5b8c5;
                border-top: 3px solid #b5b8c5;
                -webkit-animation: run 1s infinite ease-in;
                transform-origin: 0% 0% 0px;
            }

            .person .part.leg.one {
                transform: rotate3d(0, 0, 1, 70deg);
            }

            .person .part.leg.two {
                transform: rotate3d(0, 0, 1, 50deg);
                animation-delay: .5s;
            }

            .person .part .foot {
                position: absolute;
                top: 90px;
                left: 0;
                width: 3px;
                height: 4px;
                background-color: #ffffff;
                z-index: 900;
                border: 3px solid red;
            }

            @keyframes run {
                0% {
                    transform: rotate3d(0, 0, 1, -5deg);
                }

                50% {
                    transform: rotate3d(0, 0, 1, 150deg);
                }

                100% {
                    transform: rotate3d(0, 0, 1, -5deg);
                }
            }

            @keyframes bob {
                0% {
                    transform: rotate3d(0, 0, 1, 5deg);
                }

                25% {
                    transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
                }

                50% {
                    transform: rotate3d(0, 0, 1, 5deg);
                }

                75% {
                    transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
                }

                100% {
                    transform: rotate3d(0, 0, 1, 20deg) skew(-15deg, 0deg);
                }
            }

            @keyframes pump {
                0% {
                    transform: rotate3d(0, 0, 1, 80deg);
                }

                50% {
                    transform: rotate3d(0, 0, 1, -70deg);
                }

                100% {
                    transform: rotate3d(0, 0, 1, 80deg);
                }
            }

            @keyframes spin {
                0% {
                    transform: rotate3d(0, 0, 1, -180deg);
                }

                25% {
                    transform: rotate3d(0, 0, 1, -100deg);
                }

                75% {
                    transform: rotate3d(0, 0, 1, 100deg);
                }

                100% {
                    transform: rotate3d(0, 0, 1, 180deg);
                }
            }

            @keyframes sprint {
                0% {
                    transform-origin: 50% 50% 0px;
                    transform: translate(0px, 0px);
                }

                100% {
                    transform: translate(0px, 0px);
                    transform-origin: 50% 50% 0px;
                    transform: translate(400px, 0px);
                }
            }

在学习中寻找更多的快乐！