css3蒲公英飘动效果_css3 云朵飘动效果动画
先贴代码:
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部分:
![](data:image/other/yun1.png)
![](data:image/other/yun2.png)
![](data:image/other/yun3.png)
![](data:image/other/yun4.png)
![](data:image/other/yun5.png)
效果:
用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蒲公英飘动效果_css3 云朵飘动效果动画相关推荐
- css3蒲公英飘动效果_CSS3 实现飘动的云朵动画
运行效果 html CSS3 Cloud Animations By Montana Flynn css html, body { margin: 0; height: 100% } .sky { h ...
- css3 呼吸的莲花_CSS3制作莲花盛开动画
[css]代码库 CSS3制作莲花盛开动画 body { background-color: #d4d4d4; } .demo { margin: 40px auto 0; width: 500px; ...
- css3 呼吸的莲花_CSS3 呼吸的莲花动画图标
CSS 语言: CSSSCSS 确定 body { font-family: Arial, sans-serif; display: flex; justify-content: center; al ...
- css3蒲公英飘动效果_CSS3 Animation制作飘动的浮云和星星效果
带平行视差效果的星星 先看效果: 下面我们利用CSS3的animation写出这样的动画来,要点就是: 用动画不停改变背景图片位置; 动画高为无限循环; 在页面放三个DIV,首先将他们大小铺满整个窗口 ...
- 漂浮的云朵html,CSS3之动画模块实现云朵漂浮效果
动画模块-云层效果 * { margin:0; padding:0; } ul { height: 400px; background-color: skyblue; margin-top: 100p ...
- 基于纯 CSS3 技术实现美观的标签云效果
标签云是博客的标配功能,能够清晰的呈现博客的各个关键词和主题.在这个效果中,您将学习如何使用 CSS3 技术创建一个效果精美的标签云效果. 作为实验项目,使用了 CSS3 渐变,阴影和最重要的的 CS ...
- JQuery+CSS3实现封装弹出登录框效果
原文:JQuery+CSS3实现封装弹出登录框效果 上次发了一篇使用Javascript来实现弹出层的效果,这次刚好用了JQuery来实现,所以顺便记录一下: 因为这次使用了Bootstrap来做一个 ...
- html5复选框样式,11种炫酷CSS3复选框checkbox样式美化效果
这是一款效果非常酷的CSS3复选框checkbox样式美化效果.该复选框美化效果共有11种.默认的复选框的样式十分不好看,该效果将复选框加一美化,带上了一些动画效果,其中一些制作为滑动按钮的样式. 使 ...
- css3个性loading,css3 中实现炫酷的loading效果
•今天实现了一个炫酷的loading效果,基本全用css来实现,主要练习一下css3的熟练运用 •js需要引入jquery 只用到了一点点js •先看效果图 html: 加载中 . . . css: ...
最新文章
- 年度书单盘点 | “裁员潮”持续蔓延?职场没有铁饭碗,只有硬技能
- 电离辐射防护与辐射源安全基本标准_辐射防护与安全机考难点考点解析辐射防护标准...
- MySQL 高级 - 索引 - 优势和劣势
- 【转】C# 命名空间 Namespace (学习心得 23)
- Java编程技巧之单元测试用例编写流程
- java技术简介英文_Java技术常见的英文缩写
- Android 系统(255)---dump解码所得图片方法
- 以下系统组件依赖此服务器,Maven中配置本地依赖组件包
- Zoom 5.1.2及旧版本在 Win7 上的 DLL 劫持漏洞分析
- 变分自编码器(VAE)
- 基于点云的视觉引导系统
- Ubuntu下网络调试助手 NetAssist(实际这个我启动不了)
- 文档数据库(document database)和键值数据库(key-value database)的区别(NoSQL)
- sd卡驱动分析之core
- 数字单位转换(例:元->万元)
- 微信怎样操作开启微信运动?技巧经验!微信中如何去设置微信运动记录运动步数?
- 写给初学者:VB 中 ByRef 与 ByVal 参数传递方式的区别
- 关于矩形的边框,以及边框线偶尔不显示的问题
- 程序员折腾之路---日常工具集合整理之软件篇
- 使用scaffold-eth脚手架快速构建 Web3 Dapp 应用
热门文章
- springboot使用easypoi根据模板导出word。解决本地可以导出。打包到服务器导出报错的问题
- 使用NSD连接网络设备
- xshell连接服务器输入密码提示“ssh服务器拒绝了密码,请再试一次”的解决办法
- [Material Design]产品设计师的看点
- python手机端秒杀_python实现简单淘宝秒杀功能
- 不太常用,但万一用到一定要会的vue打印功能
- l1l1llll1 php,齐博CMS splitword.php后门解密
- telegraf gpu_在Windows上使用Telegraf监控nvidia gpu
- SolidWorks的GB库(钢型材库,包括铝型材、铝管等结构)安装及使用教程(生成铝型材为例)
- Java:1009: 求平均分