先贴代码：
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图
云在上面哟。右击保存
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3113590.html
