css3云朵飘动效果动画_html/css_WEB-ITnose
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了css3云朵飘动效果动画_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2237字，纯文字阅读大概需要4分钟。
内容图文
先贴代码：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图
云在上面哟。右击保存
内容总结
以上是互联网集市为您收集整理的css3云朵飘动效果动画_html/css_WEB-ITnose全部内容，希望文章能够帮你解决css3云朵飘动效果动画_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。