zoukankan      html  css  js  c++  java
  • CSS3做动物走路效果

    CSS3做动物走路效果

    采用的CSS3切换序列帧做

    核心代码如下
    <pre>.game .role {
    60px;
    height: 86px;
    position: absolute;
    top: -83px;
    background-image: url(../images/role5.png);
    background-repeat: no-repeat
    }

    .roleRunAm {
    -webkit-animation-name: roleRunAm;
    -webkit-animation-duration: 0.9s;
    -webkit-animation-timing-function: steps(6);
    -webkit-animation-iteration-count: infinite;
    animation-name: roleRunAm;
    animation-duration: 0.9s;
    animation-timing-function: steps(6);
    animation-iteration-count: infinite
    }

    @-webkit-keyframes roleRunAm {
    0% {
    background-position: 0 0
    }
    100% {
    background-position: -365px 0
    }
    }

    @keyframes roleRunAm {
    0% {
    background-position: 0 0
    }
    100% {
    background-position: -365px 0
    }
    }
    </pre>
    365px就是序列帧图片的宽度
    序列帧图(
    <pre>../images/role5.png</pre>
    <img class="alignnone size-medium wp-image-692" src="http://newmiracle.cn/wp-content/uploads/2016/12/role5-300x71.png" alt="role5" width="300" height="71" />

    &nbsp;

    播放动画直接addclass roleRunAm 停止就removeclass 这个可以结合位移做 而且不会卡出现闪烁的现象 如果用其他setTimeout 递归切换图片肯定卡

    但是此方法不能用自适应

  • 相关阅读:
    顧客満足度調査
    GeoStTool.dll过滤图层
    GeoStTool.ini相关技术要点
    GeoStTool.dll与RasterServer通信
    hdu 1007 Quoit Design
    hdu 4325 Flowers
    hdu 2516 取石子游戏
    hdu 1006 Tick and Tick
    CodeForces 101A Homework
    ZOJ Problem Set 1879
  • 原文地址:https://www.cnblogs.com/newmiracle/p/11873015.html
Copyright © 2011-2022 走看看