steps函数--参数意思和用法

最新推荐文章于 2024-03-26 17:06:39 发布

杨九日

最新推荐文章于 2024-03-26 17:06:39 发布

阅读量4.5k

点赞数 2

分类专栏： css

本文链接：https://blog.csdn.net/qq_42835377/article/details/97765013

版权

博客探讨了steps函数的参数含义和使用方法，通过7帧图像示例说明。代码注释解释了参数'start'和'end'在动画过程中的作用。同时提出了关于background-position: 0 0;的问题，讨论它如何定位背景图片，以及为何在展示时显示的是最后一帧而非预期的挥手结束动作。

摘要由CSDN通过智能技术生成

图片解释如下，参数意思和用法在代码的注释中

所引用图片共7帧，如下：
在这里插入图片描述
尺寸为200*1400，所以设置div为200*200，分为7帧，除去展示帧，需六次步骤跳转，原图如下：

代码：
参数如果是start,就是在开始的时候改变,如果是end,就是在结束的时候改变.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Step 步进函数</title>
    <style>
    .hello {
      width: 200px;
      height: 200px;
      border: 2px solid #ccc;
      background: url(images/step-animation.png) no-repeat 0 -1200px;
      -webkit-transition: background-position 0s -.3s steps(6, start);
      /*
      start（不匀速，每帧都是直接跳到每帧结尾处等待每帧时间结束）：以左侧端点为起点