css3实现spirit精灵动画

效果展示

1.演示地址:腾讯云 产业智变·云启未来 - 腾讯

2.图片演示:spirit精灵动画

css3实现spirit精灵动画_第1张图片

 完整代码




    CSS3 spirit精灵动画
    


    

注意:

  1. animation: spirit_icon_reverse 0.5s steps(24) forwards;中的0.5s为动画持续时间,24位关键帧个数减一
  2. background-position-y: -1440px;中的-1440px为单个图片大小(60px)乘以24
  3. 我是用的图片是竖图,如果你的图片是横图,按需更改

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