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

动画创意不错，不过实现动画的方法过于繁琐低效，使用了10几幅图片。比较好的方法是使用SVG+路径变形动画。

css3, horse

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

.iframe_body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    background-color: rgba(255, 255, 255, 0);
}
#stage,
#stage div,
#stage img {
    margin: 0;
    padding: 0;
    scroll: no;
    display: block;
}
#stage img {
    border: 0;
}
.layer,
.unit,
.objects,
.objectsB,
.mask {
    position: absolute;
}
.mask {
    padding-top: 1px!important;
}
#stage a {
    border: 0;
}
.behavior {
    cursor: pointer;
}
.mugedaLoad * {
    visibility: hidden;
}
.run .loadDiv {
    display: none!important;
}
.mugedaLoad .loadDiv {
    visibility: visible;
}
.objectBorder {
    position: absolute;
}
#stage {
    width: 400px;
    height: 400px;
    background-color: rgba(255, 255, 255, 0);
    overflow: hidden;
}
.layer,
.unit,
.objectC {
    width: 0px;
    height: 0px;
    left: 0px;
    top: 0px;
}
.loadDiv {
    width: 100%;
    height: 100%;
    line-height: 400px;
    background: #eee;
    text-align: center;
    color: white;
}
.run #camera {
    width: 400px;
    height: 400px;
    overflow: hidden;
    position: relative;
}
.run #o0 {
    left: 92px;
    top: 178px;
    width: 195.5px;
    height: 150px;
}
.run #l7tzbp59emq15 {
    left: -72px;
    top: -29px;
}
.run #o1 {
    left: 118px;
    top: 163px;
    width: 20px;
    height: 17px;
}
.run #o2 {
    left: 0px;
    top: 0px;
    width: 20px;
    height: 17px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a35ddfa3664e1251000e9b.png');
}
.run #l7tzbp59emq14 {
    left: -72px;
    top: -29px;
}
.run #o3 {
    left: 105px;
    top: 127px;
    width: 20px;
    height: 44px;
}
.run #o4 {
    left: 0px;
    top: 0px;
    width: 20px;
    height: 44px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a35de0a3664e2351000de8.png');
}
.run #l7tzbp59emq13 {
    left: -72px;
    top: -29px;
}
.run #o5 {
    left: 95px;
    top: 70px;
    width: 39px;
    height: 68px;
}
.run #o6 {
    left: 0px;
    top: 0px;
    width: 39px;
    height: 68px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a35ddea3664e3451000dcd.png');
}
.run #l7tzbp59emq12 {
    left: -72px;
    top: -29px;
}
.run #o7 {
    left: 207px;
    top: 156px;
    width: 15px;
    height: 19px;
}
.run #o8 {
    left: 0px;
    top: 0px;
    width: 15px;
    height: 19px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a35ddda3664e0f51000e57.png');
}
.run #l7tzbp59emq11 {
    left: -72px;
    top: -29px;
}
.run #o9 {
    left: 213px;
    top: 128px;
    width: 10px;
    height: 36px;
}
.run #o10 {
    left: 0px;
    top: 0px;
    width: 10px;
    height: 36px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a35ddea3664e1002000d5e.png');
}
.run #l7tzbp59emq10 {
    left: -72px;
    top: -29px;
}
.run #o11 {
    left: 183px;
    top: 86px;
    width: 39px;
    height: 51px;
}
.run #o12 {
    left: 0px;
    top: 0px;
    width: 39px;
    height: 51px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a35ddda3664e5902000cf6.png');
}
.run #l7tzbp59emq9 {
    left: -72px;
    top: -29px;
}
.run #o13 {
    left: 72px;
    top: 72px;
    width: 30px;
    height: 82px;
}
.run #o14 {
    left: 0px;
    top: 0px;
    width: 30px;
    height: 82px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a35ddca3664e3251000edd.png');
}
.run #l7tzbp59emq8 {
    left: -72px;
    top: -29px;
}
.run #o15 {
    left: 92px;
    top: 53px;
    width: 123px;
    height: 61px;
}
.run #o16 {
    left: 0px;
    top: 0px;
    width: 123px;
    height: 61px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a35ddca3664e2b51000e87.png');
}
.run #l7tzbp59emq7 {
    left: -72px;
    top: -29px;
}
.run #o17 {
    left: 172px;
    top: 34px;
    width: 85px;
    height: 76px;
}
.run #o18 {
    left: 0px;
    top: 0px;
    width: 85px;
    height: 76px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a35ddba3664e3351000e48.png');
}
.run #l7tzbp59emq6 {
    left: -72px;
    top: -29px;
}
.run #o19 {
    left: 229px;
    top: 30px;
    width: 39px;
    height: 49px;
}
.run #o20 {
    left: 0px;
    top: 0px;
    width: 39px;
    height: 49px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a35ddaa3664e3b51000e34.png');
}
.run #l7tzbp59emq5 {
    left: -72px;
    top: -29px;
}
.run #o21 {
    left: 180px;
    top: 161px;
    width: 18px;
    height: 18px;
}
.run #o22 {
    left: 0px;
    top: 0px;
    width: 18px;
    height: 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a35dd9a3664e2051000f07.png');
}
.run #l7tzbp59emq4 {
    left: -72px;
    top: -29px;
}
.run #o23 {
    left: 181px;
    top: 130px;
    width: 13px;
    height: 41px;
}
.run #o24 {
    left: 0px;
    top: 0px;
    width: 13px;
    height: 41px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a35dd9a3664efe4e000904.png');
}
.run #l7tzbp59emq3 {
    left: -72px;
    top: -29px;
}
.run #o25 {
    left: 181px;
    top: 68px;
    width: 27px;
    height: 75px;
}
.run #o26 {
    left: 0px;
    top: 0px;
    width: 27px;
    height: 75px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a35dd8a3664e1751000ec2.png');
}
.run #l7tzbp59emq2 {
    left: -72px;
    top: -29px;
}
.run #o27 {
    left: 94px;
    top: 153px;
    width: 16px;
    height: 21px;
}
.run #o28 {
    left: 0px;
    top: 0px;
    width: 16px;
    height: 21px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a35dd7a3664e0d51000fab.png');
}
.run #l7tzbp59emq1 {
    left: -72px;
    top: -29px;
}
.run #o29 {
    left: 90px;
    top: 117px;
    width: 19px;
    height: 45px;
}
.run #o30 {
    left: 0px;
    top: 0px;
    width: 19px;
    height: 45px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a35dd7a3664e2d51000e21.png');
}
.run #l7tzbp59emq0 {
    left: -72px;
    top: -29px;
}
.run #o31 {
    left: 89px;
    top: 76px;
    width: 48px;
    height: 50px;
}
.run #o32 {
    left: 0px;
    top: 0px;
    width: 48px;
    height: 50px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a35dd6a3664e2651000ea2.png');
}
.run #o33 {
    left: 0px;
    top: 25px;
    width: 1041px;
    height: 82px;
}
.run #l7vhbfgno0r0 {
    left: 0px;
    top: -25px;
}
.run #o34 {
    left: 0px;
    top: 25px;
    width: 1041px;
    height: 82px;
}
.run #o35 {
    left: 260px;
    top: 0px;
    width: 262px;
    height: 82px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a60094a3664ece630000f8.png');
}
.run #o36 {
    left: 0px;
    top: 0px;
    width: 262px;
    height: 82px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a60094a3664ece630000f8.png');
}
.run #o37 {
    left: 520px;
    top: 0px;
    width: 262px;
    height: 82px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a60094a3664ece630000f8.png');
}
.run #o38 {
    left: 779px;
    top: 0px;
    width: 262px;
    height: 82px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a60094a3664ece630000f8.png');
}
.run #o39 {
    left: -3px;
    top: 33px;
    width: 1541px;
    height: 74px;
}
.run #l7vhb6aet1c0 {
    left: 4px;
    top: -33px;
}
.run #o40 {
    left: -3px;
    top: 33px;
    width: 1541px;
    height: 74px;
}
.run #o41 {
    left: 385px;
    top: 0px;
    width: 387px;
    height: 74px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a5fdbea3664ed9630000fc.png');
}
.run #o42 {
    left: 771px;
    top: 0px;
    width: 387px;
    height: 74px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a5fdbea3664ed9630000fc.png');
}
.run #o43 {
    left: 0px;
    top: 0px;
    width: 387px;
    height: 74px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a5fdbea3664ed9630000fc.png');
}
.run #o44 {
    left: 1154px;
    top: 0px;
    width: 387px;
    height: 74px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-color: rgba(0, 0, 0, 0);
    background-image: url('/uploads/161101/horse/55a5fdbea3664ed9630000fc.png');
}
@-webkit-keyframes progress {
    0% {
        left: 0;
    }
    100% {
        left: 0;
    }
}
@-webkit-keyframes ko1 {
    0% {
        -webkit-transform-origin: 3px 4.5px;
        -webkit-transform: translateX(0.1px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
    }
    32.258% {
        -webkit-transform: translateX(-34px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    48.387% {
        -webkit-transform: translateX(-17.5px) translateY(-12px) rotateZ(1.42rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    64.516% {
        -webkit-transform: translateX(4.33px) translateY(-15px) rotateZ(1.01rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    80.645% {
        -webkit-transform: translateX(19.16px) translateY(0.5px) rotateZ(-0.01rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    96.774% {
        -webkit-transform: translateX(0px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(-3.83px) translateY(-0.1px) rotateZ(0rad) scaleX(1) scaleY(1);
        -webkit-transform-origin: 3px 4.5px;
        opacity: 1;
    }
}
@-webkit-keyframes ko3 {
    0% {
        -webkit-transform-origin: 5px 6px;
        -webkit-transform: translateX(0.1px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
    }
    32.258% {
        -webkit-transform: translateX(-17px) translateY(-2px) rotateZ(0.47rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    48.387% {
        -webkit-transform: translateX(-16px) translateY(-9px) rotateZ(0.02rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    64.516% {
        -webkit-transform: translateX(-4.33px) translateY(-8.67px) rotateZ(-0.27rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    80.645% {
        -webkit-transform: translateX(12.34px) translateY(3.66px) rotateZ(-0.2rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    96.774% {
        -webkit-transform: translateX(-1px) translateY(1px) rotateZ(-0.05rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(-3.67px) translateY(0.47px) rotateZ(-0.02rad) scaleX(1) scaleY(1);
        -webkit-transform-origin: 5px 6px;
        opacity: 1;
    }
}
@-webkit-keyframes ko5 {
    0% {
        -webkit-transform-origin: 18.5px 7px;
        -webkit-transform: translateX(0.1px) translateY(0px) rotateZ(0.01rad) scaleX(1) scaleY(1);
        opacity: 1;
    }
    32.258% {
        -webkit-transform: translateX(3px) translateY(1px) rotateZ(0.35rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    48.387% {
        -webkit-transform: translateX(5.25px) translateY(-3px) rotateZ(0.4rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    64.516% {
        -webkit-transform: translateX(2.5px) translateY(-7.67px) rotateZ(0.11rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    80.645% {
        -webkit-transform: translateX(1.25px) translateY(4.66px) rotateZ(-0.2rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    96.774% {
        -webkit-transform: translateX(0px) translateY(1px) rotateZ(0.01rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(-0.25px) translateY(0.27px) rotateZ(0.05rad) scaleX(1) scaleY(1);
        -webkit-transform-origin: 18.5px 7px;
        opacity: 1;
    }
}
@-webkit-keyframes ko7 {
    0% {
        -webkit-transform-origin: 12.5px 0.5px;
        -webkit-transform: translateX(0.1px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
    }
    16.129% {
        -webkit-transform: translateX(9px) translateY(8px) rotateZ(-1.33rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    64.516% {
        -webkit-transform: translateX(-56px) translateY(7.2px) rotateZ(-1.14rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    80.645% {
        -webkit-transform: translateX(-34.5px) translateY(0.6px) rotateZ(-0.17rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    96.774% {
        -webkit-transform: translateX(-1px) translateY(-3px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(5.7px) translateY(-3.72px) rotateZ(0.03rad) scaleX(1) scaleY(1);
        -webkit-transform-origin: 12.5px 0.5px;
        opacity: 1;
    }
}
@-webkit-keyframes ko9 {
    0% {
        -webkit-transform-origin: 5px 0px;
        -webkit-transform: translateX(0.1px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
    }
    16.129% {
        -webkit-transform: translateX(-3px) translateY(7px) rotateZ(-0.45rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    64.516% {
        -webkit-transform: translateX(-46.2px) translateY(5.8px) rotateZ(0.21rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    80.645% {
        -webkit-transform: translateX(-23.1px) translateY(1.9px) rotateZ(0.35rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    96.774% {
        -webkit-transform: translateX(1px) translateY(-2px) rotateZ(0.03rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(5.82px) translateY(-2.78px) rotateZ(-0.03rad) scaleX(1) scaleY(1);
        -webkit-transform-origin: 5px 0px;
        opacity: 1;
    }
}
@-webkit-keyframes ko11 {
    0% {
        -webkit-transform-origin: 12.5px 10.5px;
        -webkit-transform: translateX(0.1px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
    }
    16.129% {
        -webkit-transform: translateX(2px) translateY(5px) rotateZ(0.08rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    41.935% {
        -webkit-transform: translateX(0.36px) translateY(2.4px) rotateZ(0.57rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    64.516% {
        -webkit-transform: translateX(-2.79px) translateY(4.41px) rotateZ(1.04rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    80.645% {
        -webkit-transform: translateX(-9.39px) translateY(-1.8px) rotateZ(0.36rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    96.774% {
        -webkit-transform: translateX(-1px) translateY(-1px) rotateZ(-0.04rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(0.68px) translateY(-0.84px) rotateZ(-0.12rad) scaleX(1) scaleY(1);
        -webkit-transform-origin: 12.5px 10.5px;
        opacity: 1;
    }
}
@-webkit-keyframes ko13 {
    0% {
        -webkit-transform-origin: 24px 3px;
        -webkit-transform: translateX(0.1px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
    }
    25.806% {
        -webkit-transform: translateX(0px) translateY(-4px) rotateZ(-0.09rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    48.387% {
        -webkit-transform: translateX(0px) translateY(0.27px) rotateZ(-0.03rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    74.194% {
        -webkit-transform: translateX(0px) translateY(-3.87px) rotateZ(-0.14rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    96.774% {
        -webkit-transform: translateX(0px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(0px) translateY(0.55px) rotateZ(0.02rad) scaleX(1) scaleY(1);
        -webkit-transform-origin: 24px 3px;
        opacity: 1;
    }
}
@-webkit-keyframes ko15 {
    0% {
        -webkit-transform-origin: 61.5px 30.5px;
        -webkit-transform: translateX(0.1px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
    }
    25.806% {
        -webkit-transform: translateX(1px) translateY(0px) rotateZ(0.12rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    48.387% {
        -webkit-transform: translateX(0.68px) translateY(0px) rotateZ(0.02rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    74.194% {
        -webkit-transform: translateX(1.32px) translateY(1px) rotateZ(0.08rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    96.774% {
        -webkit-transform: translateX(1px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(0.95px) translateY(-0.14px) rotateZ(-0.01rad) scaleX(1) scaleY(1);
        -webkit-transform-origin: 61.5px 30.5px;
        opacity: 1;
    }
}
@-webkit-keyframes ko17 {
    0% {
        -webkit-transform-origin: 15.5px 52px;
        -webkit-transform: translateX(0.1px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
    }
    25.806% {
        -webkit-transform: translateX(1px) translateY(2px) rotateZ(-0.1rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    48.387% {
        -webkit-transform: translateX(0.68px) translateY(1.36px) rotateZ(-0.03rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    74.194% {
        -webkit-transform: translateX(0.32px) translateY(0.63px) rotateZ(-0.09rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    96.774% {
        -webkit-transform: translateX(0px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(-0.05px) translateY(-0.09px) rotateZ(0.01rad) scaleX(1) scaleY(1);
        -webkit-transform-origin: 15.5px 52px;
        opacity: 1;
    }
}
@-webkit-keyframes ko19 {
    0% {
        -webkit-transform-origin: 8.5px 18.5px;
        -webkit-transform: translateX(0.1px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
    }
    25.806% {
        -webkit-transform: translateX(0px) translateY(-4px) rotateZ(0.05rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    48.387% {
        -webkit-transform: translateX(0.68px) translateY(0.32px) rotateZ(0.03rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    74.194% {
        -webkit-transform: translateX(-1.22px) translateY(-4.45px) rotateZ(0.06rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    96.774% {
        -webkit-transform: translateX(0px) translateY(-1px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(0.17px) translateY(-0.51px) rotateZ(-0.01rad) scaleX(1) scaleY(1);
        -webkit-transform-origin: 8.5px 18.5px;
        opacity: 1;
    }
}
@-webkit-keyframes ko21 {
    0% {
        -webkit-transform-origin: 4px 4px;
        -webkit-transform: translateX(0.1px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
    }
    16.129% {
        -webkit-transform: translateX(-17px) translateY(1px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    32.258% {
        -webkit-transform: translateX(-3px) translateY(-8px) rotateZ(1.2rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    48.387% {
        -webkit-transform: translateX(28px) translateY(-9px) rotateZ(1.4rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    64.516% {
        -webkit-transform: translateX(44px) translateY(0px) rotateZ(0.07rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    96.774% {
        -webkit-transform: translateX(5px) translateY(1px) rotateZ(0.07rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(1.1px) translateY(1.1px) rotateZ(0.07rad) scaleX(1) scaleY(1);
        -webkit-transform-origin: 4px 4px;
        opacity: 1;
    }
}
@-webkit-keyframes ko23 {
    0% {
        -webkit-transform-origin: 8.5px 4.5px;
        -webkit-transform: translateX(0.1px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
    }
    16.129% {
        -webkit-transform: translateX(-15px) translateY(0px) rotateZ(0.12rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    32.258% {
        -webkit-transform: translateX(7px) translateY(-2px) rotateZ(0.42rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    48.387% {
        -webkit-transform: translateX(31px) translateY(-7px) rotateZ(0.13rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    64.516% {
        -webkit-transform: translateX(29px) translateY(1px) rotateZ(-0.42rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    96.774% {
        -webkit-transform: translateX(2px) translateY(1px) rotateZ(-0.05rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(-0.7px) translateY(1px) rotateZ(-0.01rad) scaleX(1) scaleY(1);
        -webkit-transform-origin: 8.5px 4.5px;
        opacity: 1;
    }
}
@-webkit-keyframes ko25 {
    0% {
        -webkit-transform-origin: 9.5px 16.5px;
        -webkit-transform: translateX(0.1px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
    }
    16.129% {
        -webkit-transform: translateX(-1px) translateY(-1px) rotateZ(0.28rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    32.258% {
        -webkit-transform: translateX(-3.8px) translateY(-5.8px) rotateZ(-0.21rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    48.387% {
        -webkit-transform: translateX(-1.85px) translateY(0.65px) rotateZ(-0.63rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    64.516% {
        -webkit-transform: translateX(-0.23px) translateY(4.43px) rotateZ(-0.53rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    77.419% {
        -webkit-transform: translateX(1.86px) translateY(1.66px) rotateZ(-0.33rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    96.774% {
        -webkit-transform: translateX(0px) translateY(0px) rotateZ(-0.03rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(-0.31px) translateY(-0.28px) rotateZ(0.02rad) scaleX(1) scaleY(1);
        -webkit-transform-origin: 9.5px 16.5px;
        opacity: 1;
    }
}
@-webkit-keyframes ko27 {
    0% {
        -webkit-transform-origin: 14px 1.5px;
        -webkit-transform: translateX(0.1px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
    }
    16.129% {
        -webkit-transform: translateX(21px) translateY(-7px) rotateZ(-0.32rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    32.258% {
        -webkit-transform: translateX(32.8px) translateY(10.4px) rotateZ(-1.33rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    48.387% {
        -webkit-transform: translateX(13.6px) translateY(9.8px) rotateZ(-1.34rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    80.645% {
        -webkit-transform: translateX(-23.47px) translateY(10.27px) rotateZ(-1.38rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    96.774% {
        -webkit-transform: translateX(-9px) translateY(1px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(-6.11px) translateY(-0.85px) rotateZ(0.28rad) scaleX(1) scaleY(1);
        -webkit-transform-origin: 14px 1.5px;
        opacity: 1;
    }
}
@-webkit-keyframes ko29 {
    0% {
        -webkit-transform-origin: 4.5px 3.5px;
        -webkit-transform: translateX(0.1px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
    }
    16.129% {
        -webkit-transform: translateX(9.01px) translateY(0.64px) rotateZ(-0.42rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    32.258% {
        -webkit-transform: translateX(26.01px) translateY(13.64px) rotateZ(-0.31rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    48.387% {
        -webkit-transform: translateX(17.01px) translateY(11.64px) rotateZ(-0.06rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    80.645% {
        -webkit-transform: translateX(-2.99px) translateY(7.64px) rotateZ(0.41rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    96.774% {
        -webkit-transform: translateX(-0.99px) translateY(0.64px) rotateZ(0.2rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(-0.59px) translateY(-0.76px) rotateZ(0.16rad) scaleX(1) scaleY(1);
        -webkit-transform-origin: 4.32px 4.03px;
        opacity: 1;
    }
}
@-webkit-keyframes ko31 {
    0% {
        -webkit-transform-origin: 25px 7px;
        -webkit-transform: translateX(0.1px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
    }
    16.129% {
        -webkit-transform: translateX(1px) translateY(-1px) rotateZ(-0.16rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    32.258% {
        -webkit-transform: translateX(1px) translateY(8px) rotateZ(-0.62rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    48.387% {
        -webkit-transform: translateX(1px) translateY(8px) rotateZ(-0.35rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    80.645% {
        -webkit-transform: translateX(0px) translateY(10px) rotateZ(0.12rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    96.774% {
        -webkit-transform: translateX(1px) translateY(3px) rotateZ(0.09rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(1.2px) translateY(1.6px) rotateZ(0.08rad) scaleX(1) scaleY(1);
        -webkit-transform-origin: 24px 6px;
        opacity: 1;
    }
}
@-webkit-keyframes ko34 {
    0% {
        -webkit-transform-origin: 520.5px 41px;
        -webkit-transform: translateX(0.1px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
    }
    99.908% {
        -webkit-transform: translateX(-521px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(-521.48px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        -webkit-transform-origin: 520.5px 41px;
        opacity: 1;
    }
}
@-webkit-keyframes ko40 {
    0% {
        -webkit-transform-origin: 770.5px 37px;
        -webkit-transform: translateX(0.1px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
    }
    99.857% {
        -webkit-transform: translateX(-764.5px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        opacity: 1;
        -webkit-animation-timing-function: linear;
    }
    100% {
        -webkit-transform: translateX(-765.6px) translateY(0px) rotateZ(0rad) scaleX(1) scaleY(1);
        -webkit-transform-origin: 770.5px 37px;
        opacity: 1;
    }
}
.iframe_body {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    ;
}
#stage,
#stage div,
#stage img {
    -webkit-animation-fill-mode: both;
}
.mask {
    -webkit-background-clip: text!important;
    -webkit-text-fill-color: transparent;
}
.run #progressbar {
    -webkit-animation: progress 0.042s linear 0s infinite normal;
}
.run #o0 {
    -webkit-transform: scaleX(1) scaleY(1);
}
.run #o1 {
    -webkit-animation: ko1 1.302s linear 0s infinite normal;
}
.run #o3 {
    -webkit-animation: ko3 1.302s linear 0s infinite normal;
}
.run #o5 {
    -webkit-transform: rotateZ(0.01rad);
    -webkit-transform-origin: 18.5px 7px;
    -webkit-animation: ko5 1.302s linear 0s infinite normal;
}
.run #o7 {
    -webkit-animation: ko7 1.302s linear 0s infinite normal;
}
.run #o9 {
    -webkit-animation: ko9 1.302s linear 0s infinite normal;
}
.run #o11 {
    -webkit-animation: ko11 1.302s linear 0s infinite normal;
}
.run #o13 {
    -webkit-animation: ko13 1.302s linear 0s infinite normal;
}
.run #o15 {
    -webkit-animation: ko15 1.302s linear 0s infinite normal;
}
.run #o17 {
    -webkit-animation: ko17 1.302s linear 0s infinite normal;
}
.run #o19 {
    -webkit-animation: ko19 1.302s linear 0s infinite normal;
}
.run #o21 {
    -webkit-animation: ko21 1.302s linear 0s infinite normal;
}
.run #o23 {
    -webkit-animation: ko23 1.302s linear 0s infinite normal;
}
.run #o25 {
    -webkit-animation: ko25 1.302s linear 0s infinite normal;
}
.run #o27 {
    -webkit-animation: ko27 1.302s linear 0s infinite normal;
}
.run #o29 {
    -webkit-animation: ko29 1.302s linear 0s infinite normal;
}
.run #o31 {
    -webkit-animation: ko31 1.302s linear 0s infinite normal;
}
.run #o34 {
    -webkit-animation: ko34 45.864s linear 0s infinite normal;
}
.run #o40 {
    -webkit-animation: ko40 29.358s linear 0s infinite normal;
}

HTML

动画创意不错，不过实现动画的方法过于繁琐低效，使用了10几幅图片。比较好的方法是使用SVG+路径变形动画。

css3, horse

编辑器支持Emmet

快捷键

动画创意不错，不过实现动画的方法过于繁琐低效，使用了10几幅图片。 比较好的方法是使用SVG+路径变形动画。

css3, horse

使用CSS3旋转变换和混合模式实现的动画图标

使用CSS3 clip-path实现的标题文本水纹波动动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：

动画创意不错，不过实现动画的方法过于繁琐低效，使用了10几幅图片。比较好的方法是使用SVG+路径变形动画。