CSS3 很棒的机器人行走（步行）动画模拟

CSS Walking Animation 没有特别的技巧，行走的动作可以分解为不同部位的不同旋转动画。

css3，robot，walk，教程

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2970
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

* {
    margin: 0;
    padding: 0;
}
body {
    background: #123752;
    height: 100%;
}
#robot {
    position: relative;
    height: 78vh;
    width: 20vh;
    margin: 0 auto;
    animation: robot 2s infinite ease-in-out;
    z-index: 2;
}
#robot div {
    position: absolute;
    transform-origin: 50% 0;
}
#robot .r div {
    background: #29516d;
}
#robot .l div {
    background: #326384;
}
#robot .leg.r,
#robot .arm.l {
    animation: trans 2s 1s infinite;
}
#robot .leg.l,
#robot .arm.r {
    animation: trans 2s infinite;
}
#robot .head {
    top: 10vh;
    left: 5vh;
    width: 9vh;
    height: 10vh;
    margin: 0 auto;
    transform-origin: 20% 80%;
    animation: head 2s infinite ease-in-out;
    background: #326384;
    border-radius: 50%;
}
#robot .arm {
    left: 5vh;
    top: 20.5vh;
    width: 8vh;
    height: 5.5vh;
}
#robot .arm div {
    top: 100%;
    left: 0;
    width: 100%;
    height: 10vh;
    box-sizing: border-box;
    transform: rotate(5deg);
    animation: arms 2s infinite ease-in-out;
}
#robot .arm.l div {
    animation-delay: -1s;
}
#robot .leg {
    top: 45vh;
    left: 5vh;
    width: 8vh;
    height: 4vh;
}
#robot .leg div {
    width: 100%;
    height: 15vh;
    top: 100%;
    animation: legs1 2s infinite ease-in-out;
}
#robot .leg div div {
    animation: legs2 2s infinite ease-in-out;
}
#robot .leg.r div {
    animation-delay: -1s;
}
.shadow {
    position: relative;
    width: 22vh;
    height: 3vh;
    margin: 0 auto;
    border-radius: 50%;
    background: #05314f;
    animation: shadow 2s infinite ease-in-out;
    z-index: 1;
}
@keyframes shadow {
    0%, 50%, 100% {
        transform: scale(1.02);
    }
    25%,
    75% {
        transform: scale(0.98);
    }
}
@keyframes head {
    /*************************************/
    
    0%, 100% {
        transform: rotate(-1deg);
    }
    25%,
    75% {
        transform: rotate(2deg);
    }
    50% {
        transform: rotate(0deg);
    }
}
@keyframes arms {
    /*************************************/
    
    0% {
        transform: rotate(2deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(2deg);
    }
}
@keyframes robot {
    0%, 50%, 100% {
        transform: translateY(0vh) rotate(0.5deg);
    }
    25%,
    75% {
        transform: translateY(-0.3vh) rotate(-0.2deg);
    }
}
@keyframes legs1 {
    0% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(-15deg);
    }
    100% {
        transform: rotate(10deg);
    }
}
@keyframes legs2 {
    0%, 100% {
        transform: rotate(2deg);
    }
    33% {
        transform: rotate(20deg);
    }
    50% {
        transform: rotate(0deg);
    }
}
@keyframes trans {
    0% {
        transform: translateX(0vh);
    }
    50% {
        transform: translateX(1vh);
    }
    100% {
        transform: translateX(0vh);
    }
}

HTML

CSS Walking Animation 没有特别的技巧，行走的动作可以分解为不同部位的不同旋转动画。

css3，robot，walk，教程

编辑器支持Emmet

快捷键

CSS Walking Animation 没有特别的技巧，行走的动作可以分解为不同部位的不同旋转动画。

css3，robot，walk，教程

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：