data-platform-visualization
/
index.html

<!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>Document</title>
    <link rel="stylesheet" href="style.css" />
    <!-- 1.基本样式 -->
    <style>
      html,
      body,
      div,
      span,
      applet,
      object,
      iframe,
      h1,
      h2,
      h3,
      h4,
      h5,
      h6,
      p,
      blockquote,
      pre,
      a,
      abbr,
      acronym,
      address,
      big,
      cite,
      code,
      del,
      dfn,
      em,
      font,
      img,
      ins,
      kbd,
      q,
      s,
      samp,
      small,
      strike,
      strong,
      sub,
      sup,
      tt,
      var,
      b,
      u,
      i,
      center,
      dl,
      dt,
      dd,
      ol,
      ul,
      li,
      fieldset,
      form,
      label,
      legend,
      table,
      caption,
      tbody,
      tfoot,
      thead,
      tr,
      th,
      td {
        margin: 0;
        padding: 0;
        border: 0;
        outline: 0;
        font-size: 100%;
        vertical-align: baseline;
        background: transparent;
      }
      html,
      body {
        width: 100%;
        position: relative;
      }
      #banner {
        position: absolute;
        min-width: 100%;
        min-height: 500px;
        height: auto;
        width: auto;
        right: 0;
        left: 0;
        top: 0;
        bottom: 0;
        z-index: -10;
        background-image: url(./images/banbj.jpeg);
        background-repeat: no-repeat;
        background-position: center;
      }
      .maxCon {
        height: 500px;
        width: 100%;
        max-width: 1200px;
        position: relative;
        overflow: hidden;
        margin: 0 auto;
      }
    </style>

    <!-- 2.图片布局样式 -->
    <style>
      /* 动画的舞台 */
      .rtMove {
        width: 444px;
        height: 430px;
        position: absolute;
        right: 70px;
        top: 40px;
        background-image: url(./images/banner.png);
        background-position: center bottom;
        background-repeat: no-repeat;
      }

      /* 动画的子元素 */

      .rtMove .tuB {
        position: absolute;
        top: 123px;
        left: 111px;
        animation: tuB 2s linear infinite;
      }

      .rtMove .tuC {
        position: absolute;
        top: 228px;
        left: 168px;
        opacity: 1;
        animation: tuC 1.6s linear infinite;
      }
      .rtMove .guangA {
        position: absolute;
        top: 309px;
        left: 279px;
        animation: guangA 1.3s linear infinite;
      }

      .rtMove .guangB {
        position: absolute;
        top: 263px;
        left: 239px;
        animation: guangB 1.1s linear infinite;
      }

      .rtMove .lingxA {
        position: absolute;
        top: 194px;
        left: 126px;
        opacity: 1;
        animation: lingxA 2s linear infinite;
      }

      .rtMove .lingxB {
        position: absolute;
        top: 163px;
        left: 79px;
        opacity: 1;
        animation: lingxB 2.2s linear infinite;
      }

      .rtMove .lingxC {
        position: absolute;
        top: 179px;
        left: 189px;
        opacity: 1;
        animation: lingxC 1.7s linear infinite;
      }

      .rtMove .lingxD {
        position: absolute;
        top: 103px;
        left: 160px;
        opacity: 1;
        animation: lingxC 2.7s linear infinite;
      }

      .rtMove .lingxE {
        position: absolute;
        top: 104px;
        left: 95px;
        opacity: 1;
        animation: lingxB 1.2s linear infinite;
      }

      .rtMove .lingxF {
        position: absolute;
        top: 84px;
        left: 144px;
        opacity: 1;
        animation: lingxA 1.4s linear infinite;
      }

      .rtMove .chaunB {
        position: absolute;
        top: 38px;
        left: 318px;
        animation: chaunB 1.2s linear infinite;
      }

      .rtMove .chaunC {
        position: absolute;
        top: 60px;
        left: 318px;
        animation: chaunC 0.7s linear infinite;
      }

      .rtMove .tuA {
        position: absolute;
        top: 140px;
        left: 316px;
        animation: tuA 1.3s linear infinite;
      }

      .rtMove .tuAa {
        position: absolute;
        top: 140px;
        left: 316px;
        animation: tuAa 1.3s linear infinite;
      }

      .rtMove .ziA {
        position: absolute;
        top: 114px;
        left: 320px;
        animation: ziA 2.6s linear infinite;
      }

      .rtMove .ziB {
        position: absolute;
        top: 144px;
        left: 339px;
        animation: ziB 2s linear infinite;
      }

      .rtMove .ziC {
        position: absolute;
        top: 91px;
        left: 349px;
        animation: ziC 1.7s linear infinite;
      }

      .rtMove .ma {
        position: absolute;
        top: 247px;
        left: 303px;
      }

      .rtMove .tuMing {
        opacity: 0;
        animation: tuMing 0.6s linear infinite;
      }

      .rtMove .ren {
        position: absolute;
        top: 283px;
        left: 330px;
      }
    </style>
  </head>
  <body>
    <div id="banner">
      <div class="an">
        <div class="maxCon">
          <div class="rtMove">
            <img class="tuB" src="./images/tuB.png" />
            <img class="guangA" src="./images/guang.png" />
            <img class="guangB" src="./images/guang.png" />
            <img class="tuC" src="./images/tuC.png" />

            <img class="lingxA" src="./images/lingxA.png" />
            <img class="lingxB" src="./images/lingxB.png" />
            <img class="lingxC" src="./images/lingxC.png" />
            <img class="lingxD" src="./images/lingxD.png" />
            <img class="lingxE" src="./images/lingxE.png" />
            <img class="lingxF" src="./images/lingxF.png" />

            <img class="chaunB" src="./images/chaunB.png" />
            <img class="chaunC" src="./images/chaunB.png" />
            <img class="tuA" src="./images/tuA.png" />
            <img class="tuAa" src="./images/tuA.png" />

            <img class="ziA" src="./images/ziA.png" />
            <img class="ziB" src="./images/ziB.png" />
            <img class="ziC" src="./images/ziC.png" />

            <img class="ma tuAn" src="./images/tuAn.png" />
            <img class="ma tuMing" src="./images/tuMing.png" />

            <img class="ren" src="./images/ren.png" />
          </div>
        </div>
      </div>
    </div>
  </body>
</html>