【案例】使用CSS3实现天空变化效果

叶子yes

已于 2022-08-19 18:44:45 修改

阅读量1.4k

点赞数 4

分类专栏： css3 文章标签： css3 动画

于 2022-07-28 16:31:37 首次发布

本文链接：https://blog.csdn.net/lq313131/article/details/126036886

版权

css3 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

使用到的图片素材：（都是一些云朵图片，背景是透明的）

图片一：
在这里插入图片描述

图片二：
在这里插入图片描述

图片三：
在这里插入图片描述

先写html结构，html结构很简单，只需要4个div标签即可，外面包裹的div用来设置背景，即天空颜色，里面三个div用来放云朵：

<div class="bg">
    <div class="cloud_one"></div>
    <div class="cloud_two"></div>
    <div class="cloud_three"></div>
</div>

接下来写CSS样式：
设置一个天蓝色的背景色：background-color: skyblue;
然后设置背景动画，变化的效果是：天蓝色–> 黑色–> 天蓝色

@keyframes sky {
      0%{
        background-color: skyblue;
      }
      50%{
        background-color: #000;
      }
      100%{
        background-color: skyblue;
      }
    }

然后设置动画播放：animation: sky 10s linear infinite;
设置完之后，就可以得到下面天空变化的效果：
在这里插入图片描述
接下来再来设置云朵的样式，三个云朵样式都是一样的：

.bg .cloud_one{
      width: 300%;
      height: 100%;
      background: url('./images/cloud_one.png') repeat-x;
      position: fixed;
      top: 0;
      left: 0;
      animation: cloud 20s linear infinite;
    }

然后再设置云朵动画，主要是让云朵不断向左移动：

@keyframes cloud {
      from{
        left: 0;
      }
      to{
        left: -200%;
      }
    }

然后让动画播放：animation: cloud 60s linear infinite;

来看看最终效果吧！

在这里插入图片描述
下面是完整代码：

<!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>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    /* 设置背景样式 */
    .bg{
      height: 100vh;
      background-color: skyblue;
      animation: sky 10s linear infinite;
    }
    /* 设置云彩样式 */
    .bg .cloud_one{
      width: 300%;
      height: 100%;
      background: url('../day09/images/cloud_one.png') repeat-x;
      position: fixed;
      top: 0;
      left: 0;
      animation: cloud 20s linear infinite;
    }
    .bg .cloud_two{
      width: 300%;
      height: 100%;
      background: url('../day09/images/cloud_two.png') repeat-x;
      position: fixed;
      top: 0;
      left: 0;
      animation: cloud 40s linear infinite;
    }
    .bg .cloud_three{
      width: 300%;
      height: 100%;
      background: url('../day09/images/cloud_three.png') repeat-x;
      position: fixed;
      top: 0;
      left: 0;
      animation: cloud 60s linear infinite;
    }
    /* 设置云彩轮播 */
    @keyframes cloud {
      from{
        left: 0;
      }
      to{
        left: -200%;
      }
    }
    /* 设置天空轮播 */
    @keyframes sky {
      0%{
        background-color: skyblue;
      }
      50%{
        background-color: #000;
      }
      100%{
        background-color: skyblue;
      }
    }
  </style>
</head>
<body>
  <div class="bg">
    <div class="cloud_one"></div>
    <div class="cloud_two"></div>
    <div class="cloud_three"></div>
  </div>
</body>
</html>