用CSS写动画--西游记案例

最新推荐文章于 2023-11-01 23:06:23 发布

meetbetterhc

最新推荐文章于 2023-11-01 23:06:23 发布

阅读量1.4k

点赞数 2

分类专栏：前端

本文链接：https://blog.csdn.net/meetbetterhc/article/details/88931643

版权

前端专栏收录该内容

19 篇文章 0 订阅

订阅专栏

我感觉这是我听过最好的前端课了，真是爱上了这个老师。

不BB了，下边我要用css来实现动画，敲了俩遍代码算是搞得清楚了，有注释，大家有不懂得地儿可以评论。

先给大家看一下效果图（PS：其实是动图的）

首先，看一下项目的结构：

用到的一些图片如下：

html代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>梦幻西游</title>
  <style>
    html,
    body,
    .container {
      height: 100%;
      overflow: hidden;
      /* 溢出了影藏 */
    }
    *{
      margin: 0;
      padding: 0;
    }
    .container {
      background: url('image/pic.png') no-repeat;
      /* 背景图不重复 */
      background-size: cover;
      /* 图片以最合适的尺寸铺满屏幕 */
    }

    .content {
      display: flex;
      /* 变为块级元素才可设置宽和高 */
      margin: 200px auto 0;
      /* 上 左右 下  auto代表水平方向居中 */
      width: 780px;
    }

    .content div {
      height: 180px;
      width: 200px;
    }

    .monkey {
      background: url('image/1.png');
      /* 每一个图片得重复，因为要形成动图，背景图在走动，所以需要重复 */
      background-position: 0 0;
      /* 起始位置是（0,0） */
      animation: monkeyMove 1s steps(8) infinite both;
      /* 播放动画  各参数代表含义是：动画名，动画时间，分8步把整个动画播放完，无限次数播放，播放完停留在最后一帧并且有延迟的话处在第一帧 */
    }
    /* 制作动画移动轨迹  monkeyMove是动画名 */
    @keyframes monkeyMove {
      0% {
        background-position: 0 0;
      }
      100% {
        /* 移动了整个图片的宽度，保证第一帧和最后出现的画面是一样的 */
        background-position: -1600px 0;
      }
    }
   

    .pig {
      background: url('image/2.png');
      /* 每一个图片得重复，因为要形成动图，背景图在走动，所以需要重复 */
      background-position: 0 0;
      /* 起始位置是（0,0） */
      animation: pigMove 1s steps(8) infinite both;
      /* 播放动画  各参数代表含义是：动画名，动画时间，分8步把整个动画播放完，无限次数播放，播放完停留在最后一帧并且有延迟的话处在第一帧 */
    }
    /* 制作动画移动轨迹  monkeyMove是动画名 */
    @keyframes pigMove {
      0% {
        background-position: 0 0;
      }
      100% {
        /* 移动了整个图片的宽度，保证第一帧和最后出现的画面是一样的 */
        background-position: -1600px 0;
      }
    }
    /* div.person（没有空格）:代表当前div样式名为person的元素
       div .person（有空格）:代表div的后代样式名为person的元素*/
    .content div.person{
      width: 170px;
      height: 240px;;
    }
    .person{
      background: url(image/3.png);
      background-position: 0 0 ;
      animation: personMove 1s steps(8) infinite both;
      /* 为保证他们在同一水平线上，你可以把下边的样式去掉看一下其区别 */
      transform: translateY(-30px);
    }
    @keyframes personMove{
      0%{
        background-position: 0 0;
      }
      100%{
        background-position: -1360px 0;
      }
    }
    .content div.shasen{
      height:200px;
      width: 210px;
    }
    .shasen {
      background: url('image/4.png');
      background-position: 0 0;
      animation: shasenMove 1s steps(8) infinite both;
    }
    @keyframes shasenMove{
      0%{
        background-position: 0 0 ;
      }
      100%{
        background-position: -1680px 0;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="content">
      <div class="monkey"></div>
      <div class="pig"></div>
      <div class="person"></div>
      <div class="shasen"></div>
    </div>
  </div>
</body>

</html>

怎么样，小伙伴们，动手试一试吧！

meetbetterhc

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
用CSS写动画--西游记案例

我感觉这是我听过最好的前端课了，真是爱上了这个老师。不BB了，下边我要用css来实现动画，敲了俩遍代码算是搞得清楚了，有注释，大家有不懂得地儿可以评论。先给大家看一下效果图（PS：其实是动图的）首先，看一下项目的结构：用到的一些图片如下：html代码如下：<!DOCTYPE html><html>&lt...
复制链接

扫一扫