css 制作如同gif图的动画（精灵动画）

最新推荐文章于 2022-08-24 11:13:56 发布

lixu102593

最新推荐文章于 2022-08-24 11:13:56 发布

阅读量749

点赞数

文章标签：动画 css 前端

原文链接：https://blog.csdn.net/qq_44943584/article/details/89416351

版权

在这里插入图片描述
如图所示的动画的制作过程

链接阿里云动画

查找的资料添加链接描述

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>CSS3 spirit精灵动画</title>
        <style>
        .bird{
			background: url(https://img.alicdn.com/imgextra/i1/19999999999999/O1CN01wTY5Zt2Njasyydqim_!!19999999999999-2-tps.png);
			width: 64px;
			height:64px;
			background-repeat:no-repeat;
			background-position: 0 0;
			background-size: 100%;
			background-position-y:0px;
			position: absolute;top: 50%;
			left: 50%;
			background-color: #FFFFFF;
		}
		.bird:hover{
			animation: bird 0.5s steps(20) forwards;
		}
        @keyframes bird{
            from {
                background-position-y:0px;
            }
            to {
                background-position-y:-1280px;
            }
        }
        </style>
    </head>
    <body>
        <div class="bird"></div>
    </body>
</html>