使用CSS3模拟真人行走动画

有背景、路牌，利用视差效果模拟真人行走，看起来像虚拟现实。

CSS3, walk

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    font-family: lucida grande, sans-serif;
    width: 760px;
    margin: 30px auto 50px;
    color: #777;
    letter-spacing: -0.1em;
    font-size: 15px;
    background: url(http://andrew-hoyer.com/experiments/walking/assets/background.jpg) repeat-x top left;
    text-shadow: 0 1px 0px #eee;
}
a,
a:visited {
    color: #777;
}
strong {
    font-weight: bold;
}
p {
    margin: 1em 0 1.5em;
    text-indent: 0.5em;
    line-height: 1.4em;
}
.controls,
.warning,
.short-link,
.social {
    text-align: center;
}
.note {
    color: #aaa;
    font-size: 75%;
}
.short-link {
    font-size: 2em;
    margin-top: 0;
    text-align: center;
}
object {
    margin-bottom: 1.5em;
}
@keyframes me {
    0% {
        transform: rotate(5deg) translate( 5px, 0px);
    }
    25% {
        transform: rotate(5deg) translate(-5px, -14px);
    }
    50% {
        transform: rotate(5deg) translate( 5px, 0px);
    }
    75% {
        transform: rotate(5deg) translate(-5px, -14px);
    }
    100% {
        transform: rotate(5deg) translate( 5px, 0px);
    }
}
@keyframes right-bicep {
    0% {
        transform: rotate(26deg);
    }
    50% {
        transform: rotate(-20deg);
    }
    100% {
        transform: rotate(26deg);
    }
}
@keyframes left-bicep {
    0% {
        transform: rotate(-20deg);
    }
    50% {
        transform: rotate(26deg);
    }
    100% {
        transform: rotate(-20deg);
    }
}
@keyframes right-forearm {
    0% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(-45deg);
    }
    100% {
        transform: rotate(-10deg);
    }
}
@keyframes left-forearm {
    0% {
        transform: rotate(-45deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(-45deg);
    }
}
@keyframes right-thigh {
    0% {
        transform: rotate(-45deg);
    }
    50% {
        transform: rotate(10deg);
    }
    100% {
        transform: rotate(-45deg);
    }
}
@keyframes left-thigh {
    0% {
        transform: rotate(10deg);
    }
    50% {
        transform: rotate(-45deg);
    }
    100% {
        transform: rotate(10deg);
    }
}
@keyframes right-shin {
    0% {
        transform: rotate(30deg);
    }
    25% {
        transform: rotate(20deg);
    }
    50% {
        transform: rotate(20deg);
    }
    75% {
        transform: rotate(85deg);
    }
    100% {
        transform: rotate(30deg);
    }
}
@keyframes left-shin {
    0% {
        transform: rotate(20deg);
    }
    25% {
        transform: rotate(85deg);
    }
    50% {
        transform: rotate(30deg);
    }
    75% {
        transform: rotate(20deg);
    }
    100% {
        transform: rotate(20deg);
    }
}
@keyframes right-foot {
    0% {
        transform: rotate(-5deg);
    }
    25% {
        transform: rotate(-7deg);
    }
    50% {
        transform: rotate(-16deg);
    }
    75% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(-5deg);
    }
}
@keyframes left-foot {
    0% {
        transform: rotate(-16deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(-7deg);
    }
    100% {
        transform: rotate(-16deg);
    }
}
@keyframes right-toes {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(-10deg);
    }
    75% {
        transform: rotate(-25deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
@keyframes left-toes {
    0% {
        transform: rotate(-10deg);
    }
    25% {
        transform: rotate(-25deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(-10deg);
    }
}
@keyframes shadow {
    0% {
        opacity: 1;
    }
    25% {
        opacity: 0.75;
    }
    50% {
        opacity: 1;
    }
    75% {
        opacity: 0.75;
    }
    100% {
        opacity: 1;
    }
}
@keyframes prop-600 {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-600px);
    }
}
@keyframes prop-1200 {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-1200px);
    }
}
@keyframes prop-2000 {
    0% {
        transform: translateX(0px);
    }
    100% {
        transform: translateX(-2000px);
    }
}

HTML

<div class="shadow"></div>

</div>
        
    </div>

</div>

有背景、路牌，利用视差效果模拟真人行走，看起来像虚拟现实。

CSS3, walk

编辑器支持Emmet

快捷键

有背景、路牌，利用视差效果模拟真人行走，看起来像虚拟现实。

CSS3, walk

使用CSS3构建的云端数据传输模拟三维动画

使用CSS3实现的山谷骏马行走动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：