ccs 动态梦幻西游

ccs 动态梦幻西游

![图片在这](https://img-blog.csdnimg.cn/20210401220306523.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDkxNTQzNw==,size_16,color_FFFFFF,t_70#pic_center)
<!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>
</head>
<style>
  * {
    margin: 0;
    padding: 0;
  }

  html,
  body {
    height: 100%;
    overflow: hidden;
  }

  .back {
    height: 100%;
    background-image: url(https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/2.jpg);
    width: 3920px;
    animation: back_move 30s infinite linear;
  }

  /* 背景图的动画 */
  @keyframes back_move {
    from {
      margin-left: -1920px;
    }

    to {
      margin-left: 0;
    }
  }

  /* 容器样式 */
  .wrap {
    height: 300px;
    width: 900px;

    position: absolute;
    top: 45%;
    left: 50%;
    margin-left: -450px;
  }

  .wrap>div {
    float: left;
  }

  /* 孙悟空的窗口 */
  .wk {
    width: 200px;
    height: 180px;

    overflow: hidden;
  }

  /* 孙悟空的背景图 */
  .wk div {
    background-image: url(https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_01_3ca39fe.png);
    height: 180px;
    width: 1600px;
    animation: wk_move 1s infinite steps(8);
  }

  @keyframes wk_move {
    from {
      margin-left: 0;
    }

    to {
      margin-left: -1600px;
    }
  }



  /* 唐僧样式 */
  .ts {
    height: 240px;
    width: 170px;
    margin-top: -30px;
    overflow: hidden;
  }

  .ts div {

    background-image: url(https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_03_f962447.png);
    width: 1360px;
    height: 240px;
    animation: ts_move 1s infinite steps(8);
  }

  @keyframes ts_move {
    from {
      margin-left: 0;
    }

    to {
      margin-left: -1360px;
    }
  }

  /* zhuabjie的背景图 */

  .zb {
    width: 200px;
    height: 180px;
    margin-left: 30px;
    overflow: hidden;
  }

  .zb div {
    background-image: url(https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_02_47bad19.png);
    height: 180px;
    width: 1600px;

    animation: zb_move 1s infinite steps(8);
  }

  @keyframes zb_move {
    from {
      margin-left: 0;
    }

    to {
      margin-left: -1600px;
    }
  }

  /* shawujing的背景图 */

  .sw {
    width: 210px;
    height: 200px;

    overflow: hidden;
  }

  .sw div {
    background-image: url(https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_04_6516d80.png);
    height: 200px;
    width: 1680px;
    animation: sw_move 1s infinite steps(8);
  }

  @keyframes sw_move {
    from {
      margin-left: 0;
    }

    to {
      margin-left: -1680px;
    }
  }
</style>

<body>
  <!-- 背景图 -->
  <div class="back"></div>

  <!-- 人的容器 -->
  <div class="wrap">
    <!-- 悟空的窗口 -->
    <div class="wk">
      <div></div>
    </div>

    <!-- 唐僧的窗口 -->
    <div class="ts">
      <div></div>
    </div>
    <!-- 猪八戒的窗口 -->
    <div class="zb">
      <div></div>
    </div>
    <!-- 沙悟净的窗口 -->
    <div class="sw">
      <div></div>
    </div>

  </div>
</body>



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值