CSS3制作加载中loading动画效果
常见的loading加载中通常是使用一个gif来实现动画效果,实际上我们可以使用css3的特性来制作,本文介绍了一种线性加载效果的css3制作方法。
在web开发中经常遇到ajax的加载,那个加载中的图标大家是不是都是用gif制作的呢?
这里顺便一提,有一个定制loader gif的小图标的工具网站,点击这里查看
此文中介绍一种线性样式的加载样式,点击这里查看demo
我们都知道,动画的本质是一帧一振画面按顺序播放,因此我们就有如下的设计思路:
画一排五个小圆圈,五个小圆圈总是花1秒时间完成透明度从1到0.1的动画,但是每个动画播放时间不同,依次延后0.2秒。
见代码实现:
首先画五个小圆圈:
HTML代码
<div class="loader"><span></span><span></span><span></span><span></span><span></span>
</div>
CSS代码
.loader span{display: inline-block;vertical-align: middle;width: 10px;height: 10px;background: black;border-radius: 50px;
}
其次,我们来定制动画
CSS代码
.loader span{display: inline-block;vertical-align: middle;width: 10px;height: 10px;background: black;border-radius: 50px;-webkit-animation: loader 1s infinite alternate;-moz-animation: loader 1s infinite alternate;
}
@-webkit-keyframes loader {0% {opacity: 1;}100% {opacity: 0.1;}
}
@-moz-keyframes loader {0% {opacity: 1;}100% {opacity: 0.1;}
}
最后,我们添加延时动画的命令:
CSS代码
.loader span{display: inline-block;vertical-align: middle;width: 10px;height: 10px;background: black;border-radius: 50px;-webkit-animation: loader 1s infinite alternate;-moz-animation: loader 1s infinite alternate;
}
.loader span:nth-of-type(2) {-webkit-animation-delay: 0.2s;-moz-animation-delay: 0.2s;
}
.loader span:nth-of-type(3) {-webkit-animation-delay: 0.4s;-moz-animation-delay: 0.4s;
}
.loader span:nth-of-type(4) {-webkit-animation-delay: 0.6s;-moz-animation-delay: 0.6s;
}
.loader span:nth-of-type(5) {-webkit-animation-delay: 0.8s;-moz-animation-delay: 0.8s;
}
@-webkit-keyframes loader {0% {opacity: 1;}100% {opacity: 0.1;}
}
@-moz-keyframes loader {0% {opacity: 1;}100% {opacity: 0.1;}
}
最后完成制作。
如需调整个数、时间也可自行根据原理定制,不过最好保证渐变的时间间隔,如果太慢会让人感觉加载有气无力,而太快了又会让人感觉不适。
- 版权声明:自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0
- 原文网址:http://soasmeblog.sinaapp.com/posts/46.html
CSS3制作加载中loading动画效果相关推荐
- css实现加载中loading动画效果
1 效果 2 实现原理 原理很简单: 1 设置100px宽高的div,再设置成圆形border-radius:50%: 2 设置border一定宽度和颜色,再设置border-left为同样宽度和另一 ...
- css3加载中动画效果,CSS3实现加载中的动画效果
Loading 的菊花图形组合的不太好,基本上实现这个功能了 动画解析 这个动画用到的 CSS3 特性: transform 主要使用 transform 属性的 rotate,将线条组合成 Load ...
- 通过JS和CSS,实现网页加载中的动画效果
需要材料: 一张loading动画的gif图片 基本逻辑: 模态框遮罩 + loading.gif动图, 默认隐藏模态框 页面开始发送Ajax请求数据时,显示模态框 请求完成,隐藏模态框 下面我们通过 ...
- CSS3超酷网页Loading加载进度条动画效果
在jQuery之家上发现的一款css3效果. CSS3 animation超酷网页Loading加载进度条动画效果 >>查看演示 > ...
- css3加载中loading代码js特效大全
下载地址 css3加载中loading代码特效大全,非常多的预加载动画特效代码. dd:
- html怎么帮图片占位,css+html实现Skeleton Screen 加载占位图动画效果(带动画)
效果 自上而下渐隐渐现 源码 html,用的angular语法,只要做简单的修改就可以成为你需要的语法 css .skeletonItem { padding: 16px; border-bottom ...
- activity中fragment 返回键不退出_优雅地处理加载中(loading),重试(retry)和无数据(empty)等...
LoadSir是一个高效易用,低碳环保,扩展性良好的加载反馈页管理框架,在加载网络或其他数据时候,根据需求切换状态页面,可添加自定义状态页面,如加载中,加载失败,无数据,网络超时,占位图,登录失效等常 ...
- js页面加载实现loading提示效果
由于页面在加载过程中请求了很多资源,导致打开过慢,且页面无提示,对用户不友好,测试人员希望增加loading效果. 参考如下步骤可行. 实际项目展示动态loading图有自有的方法,不便贴代码,以下用 ...
- vue 一直加载_vue加载中loading提示信息(iView Spin)
场景 在一些按钮的点击操作中,假如没有限制,用户多次点击,会向后台发送多次请求. 还有一种情况是:当页面加载时,假如数据没有加载完成,此时为了防止用户进行操作,会显示一个遮罩:加载中....这个操作和 ...
最新文章
- js基础--javascript基础概念之String 类型
- Android:如何实现更换主题
- [C++] STACK_Principle
- android防谷歌滑动效果,谷歌是如何做到这一点的?在Android应用程序中滑动ActionBar...
- Windows 安装 sbt
- 【转】Retrofit
- CGI、FastCGI和php-fpm的概念和区别
- pku1189 钉子和小球
- python一对一教学质量怎么样_Python大牛开小灶,一对一问答
- 详细讲解大型数据库的设计原则与开发技巧
- Java学习手册:无符号左移无符号右移有符号右移
- 天联高级版服务器信息怎么查,天联高级版
- win7电脑网站服务器,Win7系统
- 随机出题 php,asp.net/net/c#随机出题在线考试系统
- 国美易卡管理云平台,国美易卡采用大量另类数据
- 群星灵能界所有事件_张丹峰出轨经纪人实锤!愿所有原配都能活得像小三一样...
- 南充一中2021成绩查询高考,2021年南充一中升学率高不高?
- OpenMesh-网格光顺的算法
- 你好,我们可以认识一下吗?
- MFC 基于VLC的视频播放器(三)---界面设计以及对话框接受文件的拖拽
热门文章
- Vscode的相对路径读取问题及处理
- STM32 CAN波特率计算
- 谈谈如何抓取ajax动态网站
- PHP+mysql数据库开发搜索功能:中英文分词+全文检索(MySQL全文检索+中文分词(SCWS))...
- iOS- 本地文本容错搜索引擎2--如何实现英文(英文首字母,汉语拼音)对中文的搜索?...
- pymysql连接mysql数据库try_pymysql操作mysql数据库
- 小程序x钉钉内网穿透(windows) 步骤
- adb 超快速截图bash脚本
- java sound 混音_iOS音频编程之混音
- CMake 安装教程