CSS3动画之实现大话西游师徒四人走动

最新推荐文章于 2022-08-11 14:17:24 发布

做一个暴躁的开发

最新推荐文章于 2022-08-11 14:17:24 发布

阅读量764

点赞数 2

文章标签： animation html css3

本文链接：https://blog.csdn.net/qq_40549954/article/details/107901331

版权

CSS3动画之实现大话西游师徒四人走动

该动画实现所需素材如下:

背景图
在这里插入图片描述
师徒四人

在这里插入图片描述
最终效果

这里主要使用的是动画animation-timing-function: steps(7, end);
将图片分成八份逐帧播放

完整代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>大话西游</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    .bg {
      height: 720px;
      width: 100%;
      background-image: url(./大话西游/background.jpg);
      background-position: right;
      background-repeat: repeat-x;
      float: left;
      position: relative;
      animation-name: bg;
      animation-duration: 15s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;

    }

    .ts {
      height: 200px;
      width: 170px;
      float: left;
      position: absolute;
      top: 400px;
      left: 600px;
      background-image: url(./大话西游/ts.png);
      animation-name: ts;
      animation-duration: 1s;
      animation-timing-function: steps(7, end);
      animation-iteration-count: infinite;
    }


    .wk {
      height: 180px;
      width: 170px;
      float: left;
      position: absolute;
      top: 400px;
      left: 300px;
      background-image: url(./大话西游/wk.png);
      animation-name: wk;
      animation-duration: 1s;
      animation-timing-function: steps(7, end);
      animation-iteration-count: infinite;
    }

    .bj {
      height: 180px;
      width: 200px;
      float: left;
      position: absolute;
      top: 400px;
      left: 450px;
      background-image: url(./大话西游/bj.png);
      animation-name: bj;
      animation-duration: 1s;
      animation-timing-function: steps(7, end);
      animation-iteration-count: infinite;
    }

    .ss {
      height: 200px;
      width: 200px;
      float: left;
      position: absolute;
      top: 400px;
      left: 780px;
      background-image: url(./大话西游/ss.png);
      animation-name: ss;
      animation-duration: 1s;
      animation-timing-function: steps(7, end);
      animation-iteration-count: infinite;
    }

    @keyframes bg {
      0% {
        background-position: 0 0;
      }

      100% {
        background-position: 1900px 0;
      }

    }

    @keyframes ts {
      0% {
        background-position: 0 0;
      }

      100% {
        background-position: -1180px 0;
      }
    }

    @keyframes wk {
      0% {
        background-position: 0 0;
      }

      100% {
        background-position: -1400px 0;
      }
    }

    @keyframes bj {
      0% {
        background-position: 0 0;
      }

      100% {
        background-position: -1400px 0;
      }
    }

    @keyframes ss {
      0% {
        background-position: 0 0;
      }

      100% {
        background-position: -1450px 0;
      }
    }
  </style>
</head>

<body>

  <div class="bg"></div>
  <div class="ts">
  </div>
  <div class="wk">
  </div>
  <div class="bj">
  </div>
  <div class="ss">
  </div>

</body>

</html>

做一个暴躁的开发

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
CSS3动画之实现大话西游师徒四人走动

CSS3动画之实现大话西游师徒四人走动该动画实现所需素材如下:背景图师徒四人最终效果这里主要使用的是动画animation-timing-function: steps(7, end);将图片分成八份逐帧播放完整代码：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=dev
复制链接

扫一扫