动画小练习

最新推荐文章于 2024-10-10 11:15:29 发布

BloggerM

最新推荐文章于 2024-10-10 11:15:29 发布

阅读量123

点赞数

分类专栏：前端小练习文章标签： html 前端

本文链接：https://blog.csdn.net/HTML_Z/article/details/123881196

版权

前端小练习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

该博客展示了如何通过HTML和CSS创建一个类似《梦幻西游》的游戏背景动态效果。代码中利用了CSS的背景定位和关键帧动画，分别设置了四个不同的动画效果，使得背景中的四个部分按照预设的步骤无限循环播放，营造出一种动态的视觉体验。

摘要由CSDN通过智能技术生成

动画小练习

代码效果展示

在这里插入图片描述

代码展示

<!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>
      body {
        background: url(./images/xyq.webp) no-repeat;
      }
      .footer {
        width: 760px;
        height: 240px;
        /* background-color: blue; */
        margin: 350px auto;
      }
      .west {
        width: 190px;
        height: 240px;
        float: left;
        background-repeat: no-repeat !important;
      }
      /* 选择west的父元素的第一个子元素 */
      .west:nth-child(1) {
        /* background-color: green; */
        background: url(./images/west_01.png);
        /* 绑定 名字 时间 步数 无线循环  */
        animation: play-1 1.4s steps(8) infinite;
      }
      .west:nth-child(2) {
        background: url(./images/west_02.png);
        animation: play-2 1.4s steps(8) infinite;
      }
      .west:nth-child(3) {
        background: url(./images/west_03.png);
        animation: play-3 1.4s steps(8) infinite;
      }
      .west:nth-child(4) {
        background: url(./images/west_04.png);
        animation: play-4 1.4s steps(8) infinite;
      }
      @keyframes play-1 {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: -1600px 0;
        }
      }
      @keyframes play-2 {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: -1600px 0;
        }
      }
      @keyframes play-3 {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: -1360px 0;
        }
      }
      @keyframes play-4 {
        0% {
          background-position: 0 0;
        }
        100% {
          background-position: -1680px 0;
        }
      }
    </style>
  </head>
  <!-- 网页身体 -->
  <body>
    <!-- 盒子 -->
    <div class="footer">
      <div class="west"></div>
      <div class="west"></div>
      <div class="west"></div>
      <div class="west"></div>
    </div>
  </body>
</html>