纯CSS3打造逼真多层云彩动画特效

PetitQ 图片/图形 2019-3-04 2.01K 0 0

这是一款效果非常炫酷的纯 CSS3 逼真的多层云彩动画特效。该特效使用多张透明的云彩 PNG 图片作为背景图片，使用 CSS animation 动画来制作云彩水平飘动的动画效果。

HTML 结构

该多层云彩动画效果的 HTML 结构非常简单：使用一个 div.sky 作为天馈的背景层，在它的里面放置多个子<div>作为云彩容器。

也想出现在这里？联系我们吧

```
<div class="sky">
```
```
    <div class="clouds_one"></div>
```
```
    <div class="clouds_two"></div>
```
```
    <div class="clouds_three"></div>
```
```
</div>
```

CSS 样式

作为天空背景的.sky 元素设置一个固定的高度，采用相对定位，并使用 overflow: hidden;来隐藏超出范围的元素。开始时天空的颜色设置为一个较浅的蓝色#007fd5。然后为天空背景设置了一个 sky_background 的 CSS3 animation 动画，该动画在 50 秒的时间内，将天空背景的颜色由浅蓝色过渡到深蓝色，动画的 animation-timing-function 为 ease-out，动画的迭代次数 animation-iteration-count 为无限循环。在该特效中，每一个元素都被设置了 transform: translate3d(0, 0, 0)属性，该属性用于开启 GPU 的 3D 效果，提高显示的性能。

```
.sky {
```
```
    height: 480px;
```
```
    background: #007fd5;
```
```
    position: relative;
```
```
    overflow: hidden;
```

    -webkit-animation: sky_background 50s ease-out infinite;

    -moz-animation: sky_background 50s ease-out infinite;

    -o-animation: sky_background 50s ease-out infinite;

    animation: sky_background 50s ease-out infinite;

    -webkit-transform: translate3d(0, 0, 0);

    -ms-transform: translate3d(0, 0, 0);

```
    -o-transform: translate3d(0, 0, 0);
```
```
    transform: translate3d(0, 0, 0);
```
```
  }
```
```
  @keyframes sky_background {
```
```
    0% {
```
```
      background: #007fd5;
```
```
      color: #007fd5
```
```
    }
```
```
    50% {
```
```
      background: #000;
```
```
      color: #a3d9ff
```
```
    }
```
```
    100% {
```
```
      background: #007fd5;
```
```
      color: #007fd5
```
```
    }
```
```
  }
```

云层 1 使用第一幅云彩 PNG 图片作为背景图片，使用绝对定位，相对于天空容器左对齐。高度和天空相等，宽度为天空容器的 3 倍。并执行 cloud_one CSS3 动画。该动画修改云彩层的 left 属性，使云彩水平移动。

```
.clouds_one {
```

    background: url("img/cloud_one.png");

```
    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);
```
```
  }
```
```
  @keyframes cloud_one {
```
```
    0% {
```
```
      left: 0
```
```
    }
```
```
    100% {
```
```
      left: -200%
```
```
    }
```
```
  }
```

云彩 2 和云彩 3 的 CSS3 动画基本类似云彩 1，只是动画的持续时间 animation-duration 不相同，云彩 1 的持续时间为 50 秒，云彩 2 的持续时间为 75 秒，云彩 3 的持续时间为 100 秒。这样各个云层的动画时间各不相同，会得到一些背景视觉差的效果。

纯 CSS3 打造逼真多层云彩动画特效

已有 502 人购买

永久更新：
演示数据：
提取码：4ogb

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

纯CSS3打造逼真多层云彩动画特效

HTML 结构

CSS 样式

纯 CSS3 打造逼真多层云彩动画特效

相关文章

360度产品图片3D旋转展示特效

WebGL的图像扭曲变形动画特效

HTML+CSS+jQuery实现的悬停滑块

发表回复取消回复

热销模板

图片/图形

HTML 结构

CSS 样式

纯 CSS3 打造逼真多层云彩动画特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复