css3 云朵飘动效果动画_html/css_WEB-ITnose

先贴代码：

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部分：

效果：

用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图

云在上面哟。右击保存