css 制作如同gif图的动画(精灵动画)

css 制作如同gif图的动画(精灵动画)_第1张图片
如图所示的动画的制作过程

链接阿里云动画

查找的资料添加链接描述

在应用 CSS3 渐变/动画时,有个控制时间的属性 。它的取值中除了常用到的 三次贝塞尔曲线 以外,还有个让人比较困惑的 steps() 函数。
steps() 第一个参数 number 为指定的间隔数(必须是正整数),即把动画分为 n 步阶段性展示,第二个参数默认为 end,设置最后一步的状态,start 为结束时的状态,end 为开始时的状态。
那么有了这个steps(),我们就可以实现web中常见的Sprite 精灵动画了,见demo:



    
        
        
        CSS3 spirit精灵动画
        
    
    
        

你可能感兴趣的:(动画,css,前端)