/* 为类名为.sky的元素设置样式，通常用于模拟天空背景效果 */
/* .sky {
*  /* 设置元素高度为480像素 */
*  height: 100%;
* width: 100%;
*  /* 设置背景颜色为#007fd5（深蓝色），模拟天空背景 */
*  background: #007fd5;
*  /* 设置定位方式为相对定位，为可能的绝对定位子元素提供参照系 */
*  position: relative;
* /* 隐藏元素溢出内容，防止内容超出元素边界 */
*  overflow: hidden;
*  /* 使用Webkit内核的CSS动画，定义名为sky_background的动画，持续时间50秒，采用ease-out缓动函数，无限循环播放 */
*  -webkit-animation: sky_background 50s ease-out infinite;
*  /* 使用Mozilla Firefox内核的CSS动画，与Webkit内核相同设置 */
*  -moz-animation: sky_background 50s ease-out infinite;
*  /* 使用Opera内核的CSS动画，与Webkit内核相同设置 */
*  -o-animation: sky_background 50s ease-out infinite;
*  /* 使用标准的CSS动画，与Webkit内核相同设置 */
*  animation: sky_background 50s ease-out infinite;
*  /* 使用Webkit内核的translate3d变换，将元素沿x、y、z轴平移（此处为原点不动），提升渲染性能 */
*  -webkit-transform: translate3d(0, 0, 0);
*  /* 使用Microsoft Edge和IE内核的translate3d变换，与Webkit内核相同设置 */
*  -ms-transform: translate3d(0, 0, 0);
*  /* 使用Opera内核的translate3d变换，与Webkit内核相同设置 */
*  -o-transform: translate3d(0, 0, 0);
*  /* 使用标准的translate3d变换，与Webkit内核相同设置 */
*  transform: translate3d(0, 0, 0);
* }
*/

/* .clouds_one {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_one 50s linear infinite;
  -moz-animation: cloud_one 50s linear infinite;
  -o-animation: cloud_one 50s linear infinite;
  animation: cloud_one 50s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
} */

/* .clouds_two {
  background: url("https://gitee.com/leaf-miner/personal-homepage/image/cloud_two.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_two 75s linear infinite;
  -moz-animation: cloud_two 75s linear infinite;
  -o-animation: cloud_two 75s linear infinite;
  animation: cloud_two 75s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
} */

/* .clouds_three {
  background: url("image/cloud_three.png");
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 300%;
  -webkit-animation: cloud_three 100s linear infinite;
  -moz-animation: cloud_three 100s linear infinite;
  -o-animation: cloud_three 100s linear infinite;
  animation: cloud_three 100s linear infinite;
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
} */

/* 定义一个名为sky_background的Webkit内核（如Chrome、Safari）专用关键帧动画 */
@-webkit-keyframes sky_background {

  /* 在动画的0%关键帧（即动画开始时），设置背景色为#007fd5（一种蓝色），文本颜色也为#007fd5（与背景色一致） */
  0% {
    background: #007fd5;
    color: #007fd5;
  }

  /* 在动画的50%关键帧（即动画进行到一半时），设置背景色为#000（黑色），文本颜色为#a3d9ff（一种浅蓝色） */
  50% {
    background: #000;
    color: #a3d9ff;
  }

  /* 在动画的100%关键帧（即动画结束时），恢复背景色为#007fd5（与开始时相同的蓝色），文本颜色也恢复为#007fd5（与背景色一致） */
  100% {
    background: #007fd5;
    color: #007fd5;
  }
}

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

  50% {
    background: #000;
    color: #a3d9ff
  }

  100% {
    background: #007fd5;
    color: #007fd5
  }
}

@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%
  }
}