CSS3 机器人跑步/奔跑动画

CSS animation Running Man

css3，robot

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 3145
作品推荐
使用帮助
常用链接

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;
    -webkit-animation: robot 0.7s infinite ease-in-out;
    animation: robot 0.7s infinite ease-in-out;
    z-index: 2;
}
#robot div {
    position: absolute;
    -webkit-transform-origin: 50% 0;
    -ms-transform-origin: 50% 0;
    transform-origin: 50% 0;
}
#robot .r div {
    background: #29516d;
}
#robot .l div {
    background: #326384;
}
#robot .leg.r,
#robot .arm.l {
    -webkit-animation: trans 0.7s 0.35s infinite linear;
    animation: trans 0.7s 0.35s infinite linear;
}
#robot .leg.l,
#robot .arm.r {
    -webkit-animation: trans 0.7s infinite linear;
    animation: trans 0.7s infinite linear;
}
#robot .head {
    top: 10vh;
    left: 5vh;
    width: 9vh;
    height: 10vh;
    margin: 0 auto;
    -webkit-transform-origin: 20% 80%;
    -ms-transform-origin: 20% 80%;
    transform-origin: 20% 80%;
    -webkit-animation: head 0.7s infinite linear;
    animation: head 0.7s infinite linear;
    background: #326384;
}
#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;
    -webkit-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
    -webkit-animation: arms1 0.7s infinite linear;
    animation: arms1 0.7s infinite linear;
}
#robot .arm div div {
    -webkit-animation: arms2 0.7s infinite linear;
    animation: arms2 0.7s infinite linear;
}
#robot .arm.l div {
    -webkit-animation-delay: -0.35s;
    animation-delay: -0.35s;
}
#robot .leg {
    top: 45vh;
    left: 5vh;
    width: 8vh;
    height: 4vh;
}
#robot .leg div {
    width: 100%;
    height: 15vh;
    top: 100%;
    -webkit-animation: legs1 0.7s infinite linear;
    animation: legs1 0.7s infinite linear;
}
#robot .leg div div {
    -webkit-animation: legs2 0.7s infinite linear;
    animation: legs2 0.7s infinite linear;
}
#robot .leg.r div {
    -webkit-animation-delay: -0.35s;
    animation-delay: -0.35s;
}
.shadow {
    position: relative;
    width: 22vh;
    height: 3vh;
    margin: 0 auto;
    border-radius: 50%;
    background: #05314f;
    -webkit-animation: shadow 0.7s infinite linear;
    animation: shadow 0.7s infinite linear;
    z-index: 1;
    /************************************************************************************/
}
@-webkit-keyframes robot {
    0%, 50%, 100% {
        -webkit-transform: translateY(0vh) rotate(7deg);
        transform: translateY(0vh) rotate(7deg);
    }
    15%,
    65% {
        -webkit-transform: translateY(-4vh) rotate(5deg);
        transform: translateY(-4vh) rotate(5deg);
    }
}
@keyframes robot {
    0%, 50%, 100% {
        -webkit-transform: translateY(0vh) rotate(7deg);
        transform: translateY(0vh) rotate(7deg);
    }
    15%,
    65% {
        -webkit-transform: translateY(-4vh) rotate(5deg);
        transform: translateY(-4vh) rotate(5deg);
    }
}
@-webkit-keyframes head {
    0%, 100% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    25%,
    75% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }
    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@keyframes head {
    0%, 100% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    25%,
    75% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }
    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@-webkit-keyframes trans {
    0%, 100% {
        -webkit-transform: translateX(0vh);
        transform: translateX(0vh);
    }
    50% {
        -webkit-transform: translateX(3vh);
        transform: translateX(3vh);
    }
}
@keyframes trans {
    0%, 100% {
        -webkit-transform: translateX(0vh);
        transform: translateX(0vh);
    }
    50% {
        -webkit-transform: translateX(3vh);
        transform: translateX(3vh);
    }
}
@-webkit-keyframes arms1 {
    0%, 100% {
        -webkit-transform: rotate(50deg);
        transform: rotate(50deg);
    }
    50% {
        -webkit-transform: rotate(-70deg);
        transform: rotate(-70deg);
    }
}
@keyframes arms1 {
    0%, 100% {
        -webkit-transform: rotate(50deg);
        transform: rotate(50deg);
    }
    50% {
        -webkit-transform: rotate(-70deg);
        transform: rotate(-70deg);
    }
}
@-webkit-keyframes arms2 {
    0%, 100% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    50% {
        -webkit-transform: rotate(-100deg);
        transform: rotate(-100deg);
    }
}
@keyframes arms2 {
    0%, 100% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    50% {
        -webkit-transform: rotate(-100deg);
        transform: rotate(-100deg);
    }
}
@-webkit-keyframes legs1 {
    0%, 100% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }
    40% {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
}
@keyframes legs1 {
    0%, 100% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
    }
    40% {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
    }
}
@-webkit-keyframes legs2 {
    0%, 100% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    33% {
        -webkit-transform: rotate(150deg);
        transform: rotate(150deg);
    }
    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@keyframes legs2 {
    0%, 100% {
        -webkit-transform: rotate(2deg);
        transform: rotate(2deg);
    }
    33% {
        -webkit-transform: rotate(150deg);
        transform: rotate(150deg);
    }
    50% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}
@-webkit-keyframes shadow {
    0%, 50%, 100% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
    25%,
    75% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
    }
}
@keyframes shadow {
    0%, 50%, 100% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }
    25%,
    75% {
        -webkit-transform: scale(0.98);
        transform: scale(0.98);
    }
}

HTML

CSS animation Running Man

css3，robot

编辑器支持Emmet

快捷键

CSS animation Running Man

css3，robot

CSS3 很棒的可操控姿势的机器人

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：