【css】记录下雪碧图配合逐帧动画做法

程序员文章站 2022-03-27 17:10:26

...

背景

雪碧图就是那种所有图片改变效果放在一个图上，然后通过位移的动画效果做成看起来会动一样

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<div id=img>
    <img src='sprites.png'></img>
</div>
</body>
<style>
    #img{
        height: 320px;
        width: 300px;
        overflow: hidden;
    }
    @keyframes slash {
        0%{
            transform: translate(0px,0)
        }
        100%{
            transform: translate(-1800px,0)
        }
    }
    #img>img{
        animation: slash 6000ms  steps(6,end) infinite 
    }

</style>
</html>

主要是利用steps达到逐帧动画效果。
图片是1800宽，每个显示是300宽。
steps第一个参数是几帧，第二个参数有start或者end。
如果这个案例改成start，那么0%的初始效果需要改变一下，不然第一帧看不见。这个是300宽，0%就改（300px,0），100%处相应的也要改成（-1500，0）

上一篇： vue provide / inject实现页面刷新

下一篇：《王者荣耀》HDR特效上线：团战再也不眼花缭乱了