css动画：奔跑的男人

running man in scss，可以改变透明度、奔跑节奏。

css, man, run

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.running {
    --color: #fff;
    --duration: .7s;
    .outer {
        animation: outer var(--duration) linear infinite;
        .body {
            background: var(--color);
            height: 15px;
            width: 8px;
            border-radius: 4px;
            transform-origin: 4px 11px;
            position: relative;
            transform: rotate(32deg);
            animation: body var(--duration) linear infinite;
            &:before {
                content: '';
                width: 8px;
                height: 8px;
                border-radius: 4px;
                bottom: 16px;
                left: 0;
                position: absolute;
                background: var(--color);
            }
            .arm,
            .arm:before,
            .leg,
            .leg:before {
                content: '';
                width: var(--w, 11px);
                height: 4px;
                top: var(--t, 0);
                left: var(--l, 2px);
                border-radius: 2px;
                transform-origin: 2px 2px;
                position: absolute;
                background: var(--c, var(--color));
                transform: rotate(var(--r, 0deg));
                animation: var(--name, arm-leg) var(--duration) linear infinite;
            }
            .arm {
                &:before {
                    --l: 7px;
                    --name: arm-b;
                }
                &.front {
                    --r: 24deg;
                    --r-to: 164deg;
                    &:before {
                        --r: -48deg;
                        --r-to: -36deg;
                    }
                }
                &.behind {
                    --r: 164deg;
                    --r-to: 24deg;
                    &:before {
                        --r: -36deg;
                        --r-to: -48deg;
                    }
                }
            }
            .leg {
                --w: 12px;
                --t: 11px;
                &:before {
                    --t: 0;
                    --l: 8px;
                }
                &.front {
                    --r: 10deg;
                    --r-to: 108deg;
                    &:before {
                        --r: 18deg;
                        --r-to: 76deg;
                    }
                }
                &.behind {
                    --r: 108deg;
                    --r-to: 10deg;
                    --c: none;
                    &:before {
                        --c: var(--color);
                        --r: 76deg;
                        --r-to: 18deg;
                    }
                    &:after {
                        content: '';
                        top: 0;
                        right: 0;
                        height: 4px;
                        width: 6px;
                        clip-path: polygon(2px 0, 6px 0, 6px 4px, 0 4px);
                        border-radius: 0 2px 2px 0;
                        position: absolute;
                        background: var(--color);
                    }
                }
            }
        }
    }
}

@keyframes outer {
    50% {
        transform: translateY(0);
    }
    25%,
    75% {
        transform: translateY(4px);
    }
}

@keyframes body {
    50% {
        transform: rotate(16deg);
    }
    25%,
    75% {
        transform: rotate(24deg);
    }
}

@keyframes arm-leg {
    50% {
        transform: rotate(var(--r-to));
    }
}

@keyframes arm-b {
    30%,
    70% {
        transform: rotate(var(--r-to));
    }
}

.buttons {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 40px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    button {
        border: 0;
        background: 0;
        padding: 8px 16px;
        margin: 0;
        font-weight: 500;
        font-size: 16px;
        cursor: pointer;
        outline: none;
        -webkit-appearance: none;
        color: var(--c, #8A91B4);
        transition: color .3s, transform .3s;
        transform: scale(var(--s, 1));
        &:hover {
            --c: #D1D6EE;
        }
        &:active {
            --s: .9;
        }
    }
}

html {
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
}

* {
    box-sizing: inherit;
    &:before,
    &:after {
        box-sizing: inherit;
    }
}

// Center & dribbble
body {
    min-height: 100vh;
    display: flex;
    font-family: 'Roboto', Arial;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #2B3044;
    .running {
        zoom: 2;
        margin-top: -32px;
    }
    .dribbble {
        position: fixed;
        display: block;
        right: 20px;
        bottom: 20px;
        img {
            display: block;
            height: 28px;
        }
    }
    .twitter {
        position: fixed;
        display: block;
        right: 64px;
        bottom: 14px;
        svg {
            width: 32px;
            height: 32px;
            fill: #1da1f2;
        }
    }
}

HTML

running man in scss，可以改变透明度、奔跑节奏。

css, man, run

编辑器支持Emmet

快捷键

running man in scss，可以改变透明度、奔跑节奏。

css, man, run

使用lottie.js制作的3个卡通人物奔跑动画

学习如何使用CSS3和图片实现人物奔跑动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：