HTML5 使用图片和背景定位实现的人物降落和行走动画

GIF里面包含一组图片，通过background-position操作不同的图片来实现序列动画。本例中imgur图片国内被封不能正常访问，使用代理来访问。

h5, image

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    padding: 0;
    margin: 0;
}
.wrapper {
    width: 100vw;
    height: 100vh;
    display: block;
    background: #6acded;
    /*	margin:20px auto;*/
    
    position: relative;
    overflow: hidden;
}
.loader {
    position: absolute;
    left: 46%;
    top: 72%;
}
.character_cont {
    top: -17%;
    left: 42%;
    height: 130%;
    position: absolute;
}
.character {
    position: absolute;
    top: -15%;
    left: 43%;
    /* -webkit-animation: falling 2s forwards;*/
    
    transform: scale(1);
}
.character div {
    display: block;
    position: absolute;
    top: 0px;
    background: url(/uploads/2005/58512.gif) no-repeat;
    width: 60px;
    height: 130px;
    /*  transform: scale(3);
*/
}
.walking {
    background-position-x: -700px;
    -webkit-animation: walking 0.8s steps(10) infinite;
    opacity: 0;
}
@-webkit-keyframes walking {
    from {
        background-position-x: -710px;
    }
    to {
        background-position-x: -1350px;
    }
}
.falling {
    background-position-x: -640px;
}
.character {
    -webkit-animation-name: falling_anim;
    -webkit-animation-duration: 1000ms;
    -webkit-animation-delay: 0ms;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: forwards;
}
@-webkit-keyframes falling_anim {
    0% {
        top: 0%;
    }
    3.23% {
        top: 0.0234%;
    }
    6.45% {
        top: 0.0938%;
    }
    9.68% {
        top: 0.2112%;
    }
    12.9% {
        top: 0.3762%;
    }
    16.13% {
        top: 0.5892%;
    }
    19.35% {
        top: 0.8509%;
    }
    22.58% {
        top: 1.1623%;
    }
    25.81% {
        top: 1.5243%;
    }
    29.03% {
        top: 1.9382%;
    }
    32.26% {
        top: 2.4056%;
    }
    35.48% {
        top: 2.9283%;
    }
    38.71% {
        top: 3.5082%;
    }
    41.94% {
        top: 4.148%;
    }
    45.16% {
        top: 4.8504%;
    }
    48.39% {
        top: 5.6187%;
    }
    51.61% {
        top: 6.457%;
    }
    54.84% {
        top: 7.3699%;
    }
    58.06% {
        top: 8.3629%;
    }
    61.29% {
        top: 9.4429%;
    }
    64.52% {
        top: 10.6179%;
    }
    67.74% {
        top: 11.8981%;
    }
    70.97% {
        top: 13.2963%;
    }
    74.19% {
        top: 14.8288%;
    }
    77.42% {
        top: 16.5173%;
    }
    80.65% {
        top: 18.3915%;
    }
    83.87% {
        top: 20.494%;
    }
    87.1% {
        top: 22.8897%;
    }
    90.32% {
        top: 25.6875%;
    }
    93.55% {
        top: 29.0984%;
    }
    96.77% {
        top: 33.6625%;
    }
    100% {
        top: 45%;
    }
}

HTML

GIF里面包含一组图片，通过background-position操作不同的图片来实现序列动画。本例中imgur图片国内被封不能正常访问，使用代理来访问。

h5, image

编辑器支持Emmet

快捷键

GIF里面包含一组图片，通过background-position操作不同的图片来实现序列动画。本例中imgur图片国内被封不能正常访问，使用代理来访问。

h5, image

HTML5柏林噪音算法实现的墨汁浸染背景图片过渡动画特效

HTML5 Rx.js使用随机几何图形元素构建网页全屏动画背景

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：