css3 云朵飘动效果动画
2019独角兽企业重金招聘Python工程师标准>>>
先贴代码:
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="data:image/other/yun1.png"></div>
<div style="position:absolute;margin-top:5%;margin-left:-10%;opacity:0;" class="sae1"><img src="data:image/other/yun2.png"></div>
<div style="position:absolute;margin-left:-40%;opacity:0;" class="sae2"><img src="data:image/other/yun3.png"></div>
<div style="position:absolute;margin-top:3%;opacity:0;margin-left:-40%;" class="sae2"><img src="data:image/other/yun4.png"></div>
<div style="position:absolute;margin-top:10%;opacity:0;margin-left:-30%;" class="sae3"><img src="data: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图
云在上面哟。右击保存
转载于:https://my.oschina.net/wisdomofgod/blog/390986
css3 云朵飘动效果动画相关推荐
- css3蒲公英飘动效果_css3 云朵飘动效果动画
先贴代码: css部分: @-webkit-keyframes fadeIn { 0% { opacity: 0.2;width:100%; /*初始状态 透明度为0.2大小为100%*/ } 10% ...
- html5 云朵飘动效果,CSS3如何实现飘动的云朵动画 CSS3实现飘动的云朵动画代码
css3如何实现飘动的云朵动画?本篇文章小编给大家分享一下CSS3实现飘动的云朵动画代码,文章代码介绍的很详细,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 运行效果 ht ...
- css3蒲公英飘动效果_CSS3 实现飘动的云朵动画
运行效果 html CSS3 Cloud Animations By Montana Flynn css html, body { margin: 0; height: 100% } .sky { h ...
- css3蒲公英飘动效果_纯CSS3逼真的气球漂浮动画特效
这是一款使用纯CSS3制作的效果非常逼真的气球漂浮动画特效.这个气球飘动效果主要使用CSS3 animation来制作,通过控制不同气球的位移和旋转角度,来达到气球漂浮的效果. 制作方法 HTML结构 ...
- html5 云朵飘动效果,使用HTML5/Canvas制作云朵(烟雾)动画特效
JavaScript 语言: JaveScriptBabelCoffeeScript 确定 (function(main) { main(this, document, jQuery, undefin ...
- html5 云朵飘动效果,jQuery超有趣的白云飘动特效插件
jQlouds是一款非常有趣的可以制作天空中白云飘动特效的jQuery插件.天空中白云朵朵,你可以通过这个插件来设置云朵的大小.位置.模糊以及被风吹动的效果. 安装 可以使用bower安装这个白云飘动 ...
- css3蒲公英飘动效果_CSS3 Animation制作飘动的浮云和星星效果
带平行视差效果的星星 先看效果: 下面我们利用CSS3的animation写出这样的动画来,要点就是: 用动画不停改变背景图片位置; 动画高为无限循环; 在页面放三个DIV,首先将他们大小铺满整个窗口 ...
- html5 云朵飘动效果,canvas作图飘动的云朵
canvas绘制飘动的云朵 /*CSS代码片段*/ html,body{ background:#049ec4; background-repeat:repeat-y; margin:0; heigh ...
- html白云飘动效果特效代码,css3实现简单的白云飘动背景特效
这是一款非常简单的纯CSS3白云飘动背景特效.该白云飘动特效使用CSS animation动画来控制不同的白云,以不同的速度进行运动,形成白云飘动的效果. HTML结构 该白云飘动特效的HTML结果非 ...
最新文章
- [转载]jQuery.extend 函数详解
- windows 7(32/64位)GHO安装指南(序篇)~
- 判断五个分数等级划分_压力表精度等级怎么算?压力表精度等级划分及检验项目...
- 如何生成指定范围不重复的随机数数组
- idea重写接口没有@override_1.重载和重写的区别
- VC编译连接选项详解
- 排名前十名的WAP网站
- Python怎么安装PHP,php中ThinkPHP的下载和安装
- Matlab学习笔记:网格线的粗细调整
- python预处理tif格式图片
- 支付宝android 10.0.8,分享10.0.8版支付宝开启和关闭小额免密支付功能方法
- 上海第二工业大学计算机科学与技术专业吗,上海第二工业大学有哪些专业和院系-什么专业比较好...
- .Net再次使用FlashPaper
- 基于和风天气API开发的天气查询小工具(含源码)
- 数据产品经理之数据准确性及测试必要性
- MindManager思维导图软件中如何下载使用行业分析模板教程分享
- 干货!让人一见钟情的网站header设计攻略
- 在线超级计算器(微积分、方程)
- java中任何变量都可以被赋值为null,java中当给一个对象赋值为null时发生了什么...
- android 涨潮动画加载_潮汐app怎么使用?潮汐app各功能测评介绍