CSS3实现加载数据动画1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3实现加载数据动画</title>
<style type="text/css">
.box{
width: 100%;
padding: 3%;
/*设置margin与padding的值包含在所设置的宽高之中*/
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/*设置隐藏移除部分*/
overflow: hidden;
} .box .loader{
width: 30%;
float: left;
height: 200px;
margin-right: 3%;
border: 1px #cccccc solid;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; /*设置对象显示为伸缩盒（弹性盒）模型*/
display: flex;
/*设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式*/
align-items: center;
/*设置弹性盒子元素在主轴（横轴）方向上的对齐方式*/
justify-content: center;
}
.loading-1{
width: 35px;
height: 35px;
position: relative;
}
.loading-1 i{
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background: linear-gradient(transparent 0%, transparent 70%, #333333 30%, #333333 100%);
background: -webkit-linear-gradient(transparent 0%, transparent 70%, #333333 30%, #333333 100%);
background: -moz-linear-gradient(transparent 0%, transparent 70%, #333333 30%, #333333 100%);
background: -ms-linear-gradient(transparent 0%, transparent 70%, #333333 30%, #333333 100%);
background: -o-linear-gradient(transparent 0%, transparent 70%, #333333 30%, #333333 100%);
-webkit-animation: loading-1 .5s linear infinite;
-moz-animation: loading-1 .5s linear infinite;
-o-animation: loading-1 .5s linear infinite;
animation: loading-1 .5s linear infinite;
}
@-webkit-keyframes loading-1{
0%{ transform: rotate(0deg); }
50%{ transform: rotate(180deg); }
100%{ transform: rotate(360deg); }
}
@-moz-keyframes loading-1{
0%{ transform: rotate(0deg); }
50%{ transform: rotate(180deg); }
100%{ transform: rotate(360deg); }
}
@-o-keyframes loading-1{
0%{ transform: rotate(0deg); }
50%{ transform: rotate(180deg); }
100%{ transform: rotate(360deg); }
}
@keyframes loading-1{
0%{ transform: rotate(0deg); }
50%{ transform: rotate(180deg); }
100%{ transform: rotate(360deg); }
}
.loading-2 i{
/*设置为内联元素，可以使元素在同一行显示*/
display: inline-block;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 0 2px;
background-color: #333333;
}
.loading-2 i:nth-child(1){
-webkit-animation: loading-2 1s linear .1s infinite;
-moz-animation: loading-2 1s linear .1s infinite;
-o-animation: loading-2 1s linear .1s infinite;
animation: loading-2 1s linear .1s infinite;
}
.loading-2 i:nth-child(2){
-webkit-animation: loading-2 1s linear .2s infinite;
-moz-animation: loading-2 1s linear .2s infinite;
-o-animation: loading-2 1s linear .2s infinite;
animation: loading-2 1s linear .2s infinite;
}
.loading-2 i:nth-child(3){
-webkit-animation: loading-2 1s linear .3s infinite;
-moz-animation: loading-2 1s linear .3s infinite;
-o-animation: loading-2 1s linear .3s infinite;
animation: loading-2 1s linear .3s infinite;
}
.loading-2 i:nth-child(4){
-webkit-animation: loading-2 1s linear .4s infinite;
-moz-animation: loading-2 1s linear .4s infinite;
-o-animation: loading-2 1s linear .4s infinite;
animation: loading-2 1s linear .4s infinite;
}
.loading-2 i:nth-child(5){
-webkit-animation: loading-2 1s linear .5s infinite;
-moz-animation: loading-2 1s linear .5s infinite;
-o-animation: loading-2 1s linear .5s infinite;
animation: loading-2 1s linear .5s infinite;
}
@-webkit-keyframes loading-2 {
0%{ transform: scaleY(1); }
50%{ transform: scaleY(.4); }
100%{ transform: scaleY(1); }
}
@-moz-keyframes loading-2 {
0%{ transform: scaleY(1); }
50%{ transform: scaleY(.4); }
100%{ transform: scaleY(1); }
}
@-o-keyframes loading-2 {
0%{ transform: scaleY(1); }
50%{ transform: scaleY(.4); }
100%{ transform: scaleY(1); }
}
@keyframes loading-2 {
0%{ transform: scaleY(1); }
50%{ transform: scaleY(.4); }
100%{ transform: scaleY(1); }
} .loading-3{
position: relative;
}
.loading-3 i{
display: block;
width: 15px;
height: 15px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: #333333;
position: absolute;
}
.loading-3 i:nth-child(1){
top: 25px;
left:;
-webkit-animation: loading-3 1s ease 0s infinite;
-o-animation: loading-3 1s ease 0s infinite;
-moz-animation: loading-3 1s ease 0s infinite;
animation: loading-3 1s ease 0s infinite;
}
.loading-3 i:nth-child(2){
top: 17px;
left: 17px;
/*这里延迟-0.12s是因为在布局时，位置是逆时针，要使动画顺时针变换，则这里需要设置负的延迟时间*/
-webkit-animation: loading-3 1s ease -0.12s infinite;
-o-animation: loading-3 1s ease -0.12s infinite;
-moz-animation: loading-3 1s ease -0.12s infinite;
animation: loading-3 1s ease -0.12s infinite;
}
.loading-3 i:nth-child(3){
top:;
left: 25px;
-webkit-animation: loading-3 1s ease -0.24s infinite;
-o-animation: loading-3 1s ease -0.24s infinite;
-moz-animation: loading-3 1s ease -0.24s infinite;
animation: loading-3 1s ease -0.24s infinite;
}
.loading-3 i:nth-child(4){
top: -17px;
left: 17px;
-webkit-animation: loading-3 1s ease -0.36s infinite;
-o-animation: loading-3 1s ease -0.36s infinite;
-moz-animation: loading-3 1s ease -0.36s infinite;
animation: loading-3 1s ease -0.36s infinite;
}
.loading-3 i:nth-child(5){
top: -25px;
left:;
-webkit-animation: loading-3 1s ease -0.48s infinite;
-o-animation: loading-3 1s ease -0.48s infinite;
-moz-animation: loading-3 1s ease -0.48s infinite;
animation: loading-3 1s ease -0.48s infinite;
}
.loading-3 i:nth-child(6){
top: -17px;
left: -17px;
-webkit-animation: loading-3 1s ease -0.6s infinite;
-o-animation: loading-3 1s ease -0.6s infinite;
-moz-animation: loading-3 1s ease -0.6s infinite;
animation: loading-3 1s ease -0.6s infinite;
}
.loading-3 i:nth-child(7){
top:;
left: -25px;
-webkit-animation: loading-3 1s ease -0.72s infinite;
-o-animation: loading-3 1s ease -0.72s infinite;
-moz-animation: loading-3 1s ease -0.72s infinite;
animation: loading-3 1s ease -0.72s infinite;
}
.loading-3 i:nth-child(8){
top: 17px;
left: -17px;
-webkit-animation: loading-3 1s ease -0.84s infinite;
-o-animation: loading-3 1s ease -0.84s infinite;
-moz-animation: loading-3 1s ease -0.84s infinite;
animation: loading-3 1s ease -0.84s infinite;
}
@-webkit-keyframes loading-3 {
50%{
transform: scale(.4);
/*设置透明度为*/
opacity: .3;
}
100%{
transform: scale(1);
/*设置透明度为*/
opacity:;
}
}
@-o-keyframes loading-3 {
50%{
transform: scale(.4);
/*设置透明度为*/
opacity: .3;
}
100%{
transform: scale(1);
/*设置透明度为*/
opacity:;
}
}
@-moz-keyframes loading-3 {
50%{
transform: scale(.4);
/*设置透明度为*/
opacity: .3;
}
100%{
transform: scale(1);
/*设置透明度为*/
opacity:;
}
}
@keyframes loading-3 {
50%{
transform: scale(.4);
/*设置透明度为*/
opacity: .3;
}
100%{
transform: scale(1);
/*设置透明度为*/
opacity:;
}
}
</style>
</head>
<body>
<div class="box">
<div class="loader">
<div class="loading-1"><i></i></div>
</div>
<div class="loader">
<div class="loading-2">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
<div class="loader">
<div class="loading-3">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
</div>
</body>
</html>
CSS3实现加载数据动画1的更多相关文章
- CSS3实现加载数据动画2
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css3加载ing动画
项目中ajax交互成功前总会需要给用户提醒,比如请稍候.正在加载中等等,那个等待的动图以前项目中用的是gif,在移动端画质很渣,有毛边,于是在新项目中用css3展示加载中的动画效果. function ...
- 纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
- 2款不同样式的CSS3 Loading加载动画 附源码
原文:2款不同样式的CSS3 Loading加载动画 附源码 我们经常看到的Loading加载很多都是转圈圈的那种,今天我们来换一种有创意的CSS3 Loading加载动画,一种是声波形状的动画,另一 ...
- 10个样式各异的CSS3 Loading加载动画
前几天我在园子里分享过2款很酷的CSS3 Loading加载动画,今天又有10个最新的Loading动画分享给大家,这些动画的样式都不一样,实现起来也并不难,你很容易把它们应用在项目中,先来看看效果图 ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- Android动画之仿美团加载数据等待时，小人奔跑进度动画对话框（附顺丰快递员奔跑效果）
Android动画之仿美团加载数据等待时,小人奔跑进度动画对话框(附顺丰快递员奔跑效果) 首句依然是那句老话,你懂得! finddreams :(http://blog.csdn.net/finddr ...
- echarts在.Net中使用实例(二) 使用ajax动态加载数据
通过上一篇文章可以知道和echarts参考手册可知,series字段就是用来存储我们显示的数据,所以我们只需要用ajax来获取series的值就可以. option 名称 描述 {color}back ...
- iscroll5 上拉，下拉 加载数据
我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...
随机推荐
- fastcgi+lighttpd+c语言 实现搜索输入提示
1.lighttpd 服务器 lighttpd是一个比较轻量的服务器,在运行fastcgi上效率较高.lighttpd只负责投递请求到fastcgi. centos输入yum install ligh ...
- Android（java）学习笔记16：多线程 - 定时器概述和使用
1. 定时器: 定时器是一个应用十分广泛的线程工具,可用于调度多个定时任务以后台线程的方式执行. 在Java中,可以通过Timer和TimerTask类来实现定义调度的功能 Timer public ...
- Uva 4394 字符串刷子
题目链接:https://vjudge.net/contest/164840#problem/A 题意:一个字符串刷子,每次可以将一段连续的字符串变成一种颜色,给两个字符串,最少通过几次可以将第一个字 ...
- 2018中国大学生程序设计竞赛 - 网络选拔赛 4 - Find Integer 【费马大定理+构造勾股数】
Find Integer Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Tota ...
- java线程池系列(1)-ThreadPoolExecutor实现原理
前言 做java开发的,一般都避免不了要面对java线程池技术,像tomcat之类的容器天然就支持多线程. 即使是做偏后端技术,如处理一些消息,执行一些计算任务,也经常需要用到线程池技术. 鉴于线程池 ...
- 面向对象编程——class继承
在上面的章节中我们看到了JavaScript的对象模型是基于原型实现的.特点是简单,缺点是理解起来比传统类-实例模型要困难,最大的缺点是继承的实现需要编写大量代码,并且需要正确实现原型链. 新的关键字 ...
- iOS9全新的联系人相关框架——Contacts Framework
iOS9全新的联系人相关框架——Contacts Framework 一.引言 在以前iOS开发中,涉及联系人相关的编程,代码都非常繁琐,并且框架的设计也不是Objective-C风格的,这使开发者用 ...
- c#常用数据库封装再次升级
c#封装的几类数据库操作: 1.sqilte 2.berkeleydb 3.一般数据库 4.redis 包含其他项目: 1.序列化 2.通信 3.自定义数据库连接池 再次升级内容: 1.新增redis ...
- js数组去重方法整理
1.思路:定义一个新数组,并存放原数组的第一个元素,然后将原数组的项和新数组的元素一一对比,若不同则存放在新数组中. function unique(arr){ var res = [arr[0]]; ...
- 【转载】Git忽略规则和.gitignore规则不生效的解决办法
原文:https://www.cnblogs.com/zhangxiaoliu/p/6008038.html Git忽略规则: 在git中如果想忽略掉某个文件,不让这个文件提交到版本库中,可以使用修改 ...