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

背景雪碧图就是那种所有图片改变效果放在一个图上，然后通过位移的动画效果做成看起来会动一样代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, ...

业火之理

1471人浏览 · 2019-08-24 20:41:40

业火之理 · 2019-08-24 20:41:40 发布

背景

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

代码

<!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）

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐