一张图片做成一部小动画(steps)

一张雪碧图做一个小动画,不是需要制作gif,不需要制作视屏。(温馨提醒,请勿盗图哦~)

样式使用及说明

一张图片做成一部小动画(steps)_第1张图片

  • 制作一张这样的png图片。

  • 样式如下

  1. data-standard {
    width: 124px;
    height: 131px;
    background: url("…/images/animation/data_standard.png") no-repeat;
    animation: standard steps(7, end) 2s infinite;
    -ms-animation: standard steps(7, end) 2s infinite;
    -webkit-animation: standard steps(7, end) 2s infinite;
    -moz-animation: standard steps(7, end) 2s infinite;
    }

  2. @keyframes standard {
    100% {
    background-position: 0 -917px;// 以最后一针的图片的最后一个像素为终点
    }
    }

  3. @-ms-keyframes standard {
    100% {
    background-position: 0 -917px;
    }

效果显示

一张图片做成一部小动画(steps)_第2张图片

知识整理

  • animation中的steps()逐帧动画
  1. 第一个参数 number 为指定的间隔数,即把动画分为几步展示,(必须是正整数)
  2. 第二个参数默认是end,设置最后一步的状态,即第一帧是第一步动画的开始
  3. 第二个参数如果设置为start时, 即第一帧是第一步动画的结束

你可能感兴趣的:(一张图片做成一部小动画(steps))