html5云朵效果,纯CSS3打造逼真的多层云彩动画特效

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

使用方法

HTML结构

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

作为云彩容器。

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;