css3 云朵飘动效果动画

先贴代码：

css部分：

@-webkit-keyframes fadeIn {

0% {

opacity: 0.2;width:100%; /*初始状态 透明度为0.2大小为100%*/

}

10%{

opacity: 0.3;width:105%; /*补间动画10% 透明度0.3 大小105%*/

}

20%{

opacity: 0.4;width:110%; 

}

30% {

opacity: 0.5;width:115%; 

}

40%{

opacity: 0.6;width:125%; 

}

50%{

opacity: 0.7;width:130%;

}

60%{

opacity: 0.8;width:135%;

}

70%{

opacity: 0.7;width:140%;

}

80%{

opacity: 0.6;width:145%;

}

90%{

opacity: 0.4;width:150%;

}

100% {

opacity: 0.3;width:155%; /*结尾状态 透明度为0.3,大小放大为155%*/

}

}

.sae{

-webkit-animation-name: fadeIn; /*动画名称*/

-webkit-animation-duration: 2s; /*动画持续时间*/

-webkit-animation-iteration-count: infinite; /*动画次数*/

-webkit-animation-delay: 0s; /*延迟时间*/

}

.sae1{

-webkit-animation-name: fadeIn; /*动画名称*/

-webkit-animation-duration: 2s; /*动画持续时间*/

-webkit-animation-iteration-count: infinite; /*动画次数*/

-webkit-animation-delay: 3s; /*延迟时间*/

}

.sae2{

-webkit-animation-name: fadeIn; /*动画名称*/

-webkit-animation-duration: 2s; /*动画持续时间*/

-webkit-animation-iteration-count: infinite; /*动画次数*/

-webkit-animation-delay: 5s; /*延迟时间*/

}

.sae3{

-webkit-animation-name: fadeIn; /*动画名称*/

-webkit-animation-duration: 2s; /*动画持续时间*/

-webkit-animation-iteration-count: infinite; /*动画次数*/

-webkit-animation-delay: 2s; /*延迟时间*/

}

html部分：

<div style="position:absolute;opacity:0;" class="sae"><img src="image/other/yun1.png"></div>

<div style="position:absolute;margin-top:5%;margin-left:-10%;opacity:0;" class="sae1"><img src="image/other/yun2.png"></div>

<div style="position:absolute;margin-left:-40%;opacity:0;" class="sae2"><img src="image/other/yun3.png"></div>

<div style="position:absolute;margin-top:3%;opacity:0;margin-left:-40%;" class="sae2"><img src="image/other/yun4.png"></div>

<div style="position:absolute;margin-top:10%;opacity:0;margin-left:-30%;" class="sae3"><img src="image/other/yun5.png"></div>

效果：

用PC截图 看起来云被放的太大 不明显   手机端更清晰

解释下：

首先是css部分

@-webkit-keyframes fadeIn  这部分为CSS动画

通过百分比控制 补间动画  

我这做的是一个云从后面飘上来的一个效果。

所以我的补间动画

云从 透明  小  --》明显 大 --》透明 更大

如果觉得画面漂浮动画卡顿，可以创建更多补间时间，以及调整动画时长来让它更流畅。

.sae{

-webkit-animation-name: fadeIn; /*动画名称*/

-webkit-animation-duration: 2s; /*动画持续时间*/

-webkit-animation-iteration-count: infinite; /*动画次数:无限循环*/

-webkit-animation-delay: 0s; /*延迟时间*/

}

引用动画，并设置动画参数。

因为有多朵云，所以要设置不同的参数，这样云才能有快有慢，

延迟让云朵出现错开

html 部分即使  设置云的位置已经  云图片

因为我们要有云不停飘动的效果，所以添加了多张云图，同时位置错开。

下面附上一张云朵的png图

云在上面哟。右击保存