master

分支 (1)

管理

管理

master

h5-c3
/
漂浮的云朵.html

<!DOCTYPE html>
<html lang="zh">
  <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>
      /* 先设置天空盒子 */
      .sky {
        height: 480px;

        background: #007fd5;

        position: relative;

        overflow: hidden;
        animation: sky_background 10s infinite ;
      }

      /* 分别将三个放云彩的盒子叠放进天空盒子：  */
      .sky .clouds_one {
        background: url("./images/cloud_one.png");

        position: absolute;

        left: 0;

        top: 0;

        height: 100%;

        width: 300%;
        animation: cloud_one 10s infinite ;
      }

      .sky .clouds_two {
        background: url("./images/cloud_two.png");

        position: absolute;

        left: 0;

        top: 0;

        height: 100%;

        width: 300%;
        animation: cloud_two 10s infinite ;
      }

      .sky .clouds_three {
        background: url("./images/cloud_three.png");

        position: absolute;

        left: 0;

        top: 0;

        height: 100%;

        width: 300%;
        animation: cloud_three 10s infinite ;
      }
      /*
      设置动画效果：
        设置填空盒子动画效果：天空有颜色和背景色两层设置，通过这两个颜色的变化来实现天空变化的效果 */
      @keyframes sky_background {
        0% {
          background: #007fd5;

          color: #007fd5;
        }

        50% {
          background: #000;

          color: #a3d9ff;
        }

        100% {
          background: #007fd5;

          color: #007fd5;
        }
      }

      /* 兼容性设置： */
      @-webkit-keyframes sky_background {
        0% {
          background: #007fd5;

          color: #007fd5;
        }

        50% {
          background: #000;

          color: #a3d9ff;
        }

        100% {
          background: #007fd5;

          color: #007fd5;
        }
      }

      @-moz-keyframes sky_background {
        0% {
          background: #007fd5;

          color: #007fd5;
        }

        50% {
          background: #000;

          color: #a3d9ff;
        }

        100% {
          background: #007fd5;

          color: #007fd5;
        }
      }

      /* 定义三个云朵盒子的动画效果（从屏幕左边向屏幕右侧移动）： */
      @-webkit-keyframes cloud_one {
        0% {
          left: 0;
        }

        100% {
          left: -200%;
        }
      }

      @-moz-keyframes cloud_one {
        0% {
          left: 0;
        }

        100% {
          left: -200%;
        }
      }

      @keyframes cloud_one {
        0% {
          left: 0;
        }

        100% {
          left: -200%;
        }
      }

      @-webkit-keyframes cloud_two {
        0% {
          left: 0;
        }

        100% {
          left: -200%;
        }
      }

      @-moz-keyframes cloud_two {
        0% {
          left: 0;
        }

        100% {
          left: -200%;
        }
      }

      @keyframes cloud_two {
        0% {
          left: 0;
        }

        100% {
          left: -200%;
        }
      }

      @-webkit-keyframes cloud_three {
        0% {
          left: 0;
        }

        100% {
          left: -200%;
        }
      }

      @-moz-keyframes cloud_three {
        0% {
          left: 0;
        }

        100% {
          left: -200%;
        }
      }

      @keyframes cloud_three {
        0% {
          left: 0;
        }

        100% {
          left: -200%;
        }
      }
    </style>
  </head>
  <body>
    <div class="sky">
      <div class="clouds_one"></div>

      <div class="clouds_two"></div>

      <div class="clouds_three"></div>
    </div>
  </body>
</html>