CSS-animation-梦幻西游小案例

最新推荐文章于 2024-08-21 11:04:16 发布

Maple-Ning

最新推荐文章于 2024-08-21 11:04:16 发布

阅读量124

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_57443373/article/details/119763718

版权

这是我学习了CSS的动画效果之后，动手练习的小案例

<!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;
    }
    /* html相对于屏幕，而body相对于html */
    html,body{
      height: 100%;
      overflow: hidden;
    }
    .back{
      width: 3920px;
      height: 100%;
      background-image: url(./2.jpg);
      margin-left: -2000px;
      /* 设置动画  动画名  动画持续时间  动画执行次数  动画执行速度 */
      animation: back_move 25s infinite linear;
    }
    /* 背景图片动画效果 */
    @keyframes back_move {
      /* 背景图片移动 */
      from{
        margin-left: -1920px;
      }
      to{
        margin-left: 0;
      }
    }
    /* 内容区域样式 */
    .content{
      width: 1200px;
      height: 400px;
      /* 开启绝对定位 */
      position: absolute;
      left: 20%;
      top: 30%;
    }
    /* 悟空区域样式 */
    .wk{
      width: 200px;
      height: 180px;
      /* 开启左浮动 */
      float: left;
      overflow: hidden;
    }
    /* 八戒区域样式 */
    .bj{
      width: 200px;
      height: 180px;
      /* 开启左浮动 */
      float: left;
      overflow: hidden;
    }
    /* 唐僧区域样式 */
    .ts{
      width: 170px;
      height: 240px;
      /* 开启左浮动 */
      float: left;
      overflow: hidden;
    }
    /* 沙僧区域样式 */
    .ss{
      width: 210px;
      height: 200px;
      overflow: hidden;
    }
    /* 悟空图片样式 */
    .wk img{
      height: 180px;
      /* 开启动画效果 */
      animation: wk_move 1s  steps(8) infinite;
    }
    /* 八戒图片样式 */
    .bj img{
      height: 180px;
      /* 开启动画效果 */
      animation: bj_move 1s  steps(8) infinite;
    }
    /* 唐僧图片样式 */
    .ts img{
      height: 240px;
      /* 开启动画效果 */
      animation: ts_move 1s  steps(8) infinite;
    }
    /* 沙僧图片样式 */
    .ss img{
      height: 200px;
      /* 开启动画效果 */
      animation: ss_move 1s  steps(8) infinite;
    }
    /* 悟空人物动画 */
    @keyframes wk_move {
      from{
        margin-left: 0;
      }
      to{
        margin-left: -1600px;
      }
    }
    /* 八戒人物动画 */
    @keyframes bj_move {
      from{
        margin-left: 0;
      }
      to{
        margin-left: -1600px;
      }
    }
    /* 唐僧人物动画 */
    @keyframes ts_move {
      from{
        margin-left: 0;
      }
      to{
        margin-left: -1360px;
      }
    }
    /* 沙僧人物动画 */
    @keyframes ss_move {
      from{
        margin-left: 0;
      }
      to{
        margin-left: -1680px;
      }
    }
  </style>
</head>
<body>
  <!-- 背景 -->
  <div class="back">
    <div class="content">
      <!-- 悟空 -->
      <div class="wk">
        <!-- 悟空图片 -->
        <img src="wk.png">
      </div>
      <!-- 八戒 -->
      <div class="bj">
        <!-- 八戒图片 -->
        <img src="bj.png">
      </div>
      <!-- 唐僧 -->
      <div class="ts">
        <!-- 唐僧图片 -->
        <img src="ts.png">
      </div>
      <!-- 沙僧 -->
      <div class="ss">
        <!-- 沙僧图片 -->
        <img src="ss.png">
      </div>
    </div>
  </div>
</body>
</html>

由于动图制作比较麻烦，这里就只放图片了

在这里插入图片描述

Maple-Ning

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS-animation-梦幻西游小案例

这是我学习了CSS的动画效果之后，动手练习的小案例<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>梦幻西游</title> <style> /* 通配符取
复制链接

扫一扫