当前位置:Gxlcms > html代码 > css3云朵飘动效果动画_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:558人阅读

先贴代码:

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图

云在上面哟。右击保存

人气教程排行