提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

前端序列帧动画实现

动画前端 实现
2023-06-13 09:12:15 时间

原理

1.UI 提供精灵图/雪碧图（就是将序列帧排在一张图片上的图）

2.通过代码不断改变图片的位置，从而形成动画效果

代码实现

  <style>
        .logo_gif {
            width: 300px; // 单个动画帧尺寸
            height: 300px;
            cursor: pointer;
            background-image: url(./sequence.png);
            background-size: 100%;
            background-position-y: 0;
            animation: mouse-in 1.5s;
            animation-timing-function:steps(26); // 动画帧数量
            animation-iteration-count:infinite  // 动画循环播放
        }
        @keyframes mouse-in{
            from{
                background-position-y: 0;
            }
            to{
                background-position-y: -7800px; // 根据 元素大小*动画帧数量得出
            }
        }
    </style>
</head>
<body>
    <div class="logo_gif" ></div>
</body>

注意点

animation-timing-function:steps();；里面的数字为动画帧数量也就是雪碧图里面的图片数量 background-position-y的值不能随便取，必须根据元素的大小乘以动画帧数量得出 如本例元素大小为300，虽然雪碧图的大小是 400 x 10400 我们不能写成

   @keyframes mouse-in{
            from{
                background-position-y: 0;
            }
            to{
                background-position-y: -10400px; // 错误
            }
        }

而是 300 * 26 = 7800

   @keyframes mouse-in{
            from{
                background-position-y: 0;
            }
            to{
                background-position-y: -7800px; // 正确
            }
        }

如果是 200的元素 则 background-position-y的值为 200 * 26 = 5200

相关文章