前端练习--跑步动画

comegoing-归去兮来

已于 2023-12-06 15:49:36 修改

阅读量173

点赞数

分类专栏：前端基础练习文章标签：前端 html css

于 2022-09-02 14:54:49 首次发布

本文链接：https://blog.csdn.net/comegoing_xin_lv/article/details/126663122

版权

前端基础练习专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、效果展示

二、代码

一、效果展示

二、代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>跑步动画</title>
    <style>
      @keyframes test {
        from {
          background-position: 0px 91px;
        }
        to {
          background-position: -474px 91px;
        }
      }
      .box1 {
        width: 70px;
        height: 91px;
        background-image: url("../src/img_exercise/animation.png");
        animation-name: test;
        animation-duration: 0.5s;
        animation-iteration-count: infinite;
        animation-timing-function: steps(6);
      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>