<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<style type="text/css">
.box {
width: 100%;
padding: 3%;
box-sizing: border-box;
overflow: hidden
} .box .loader {
width: 30%;
float: left;
height: 200px;
margin-right: 3%;
border: 1px #ccc solid;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center
} @-webkit-keyframes loading-1 {
0% {
transform: rotate(0deg)
}
50% {
transform: rotate(180deg)
}
100% {
transform: rotate(360deg)
}
} .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%, #333 30%, #333 100%);
-webkit-animation: loading-1 .6s linear 0s infinite
} @-webkit-keyframes loading-2 {
0% {
transform: scaleY(1)
}
50% {
transform: scaleY(.4)
}
100% {
transform: scaleY(1)
}
} .loading-2 i {
display: inline-block;
width: 4px;
height: 35px;
border-radius: 2px;
margin: 0 2px;
background-color: #333
} .loading-2 i:nth-child(1) {
-webkit-animation: loading-2 1s ease-in .1s infinite
} .loading-2 i:nth-child(2) {
-webkit-animation: loading-2 1s ease-in .2s infinite
} .loading-2 i:nth-child(3) {
-webkit-animation: loading-2 1s ease-in .3s infinite
} .loading-2 i:nth-child(4) {
-webkit-animation: loading-2 1s ease-in .4s infinite
} .loading-2 i:nth-child(5) {
-webkit-animation: loading-2 1s ease-in .5s infinite
} @-webkit-keyframes loading-3 {
50% {
transform: scale(.4);
opacity: .3
}
100% {
transform: scale(1);
opacity: 1
}
} .loading-3 {
position: relative
} .loading-3 i {
display: block;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #333;
position: absolute
} .loading-3 i:nth-child(1) {
top: 25px;
left: 0;
-webkit-animation: loading-3 1s ease 0s infinite
} .loading-3 i:nth-child(2) {
top: 17px;
left: 17px;
-webkit-animation: loading-3 1s ease -.12s infinite
} .loading-3 i:nth-child(3) {
top: 0;
left: 25px;
-webkit-animation: loading-3 1s ease -.24s infinite
} .loading-3 i:nth-child(4) {
top: -17px;
left: 17px;
-webkit-animation: loading-3 1s ease -.36s infinite
} .loading-3 i:nth-child(5) {
top: -25px;
left: 0;
-webkit-animation: loading-3 1s ease -.48s infinite
} .loading-3 i:nth-child(6) {
top: -17px;
left: -17px;
-webkit-animation: loading-3 1s ease -.6s infinite
} .loading-3 i:nth-child(7) {
top: 0;
left: -25px;
-webkit-animation: loading-3 1s ease -.72s infinite
} .loading-3 i:nth-child(8) {
top: 17px;
left: -17px;
-webkit-animation: loading-3 1s ease -.84s infinite
} </style>
<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 loading 效果的更多相关文章

  1. HTML5+CSS3 loading 效果收集--转载

    用gif图片来做loading的时代已经过去了,它显得太low了,而用HTML5/CSS3以及SVG和canvas来做加载动画显得既炫酷又逼格十足.这已经成为一种趋势. 这里收集了几十个用html5和 ...

  2. CSS3 loading效果全

    梦想天空 关注前端开发技术 ◆ 推动 HTML5 & CSS3 技术发展 ◆ 本博客全新站点:yyyweb.com 欢迎围观:) 首页 管理 订阅 网页设计 JavaScript jQuery ...

  3. html5 css3 loading 效果

    canvas  html5load1 主要思路update  实现12个点的绘制和旋转效果 var update = function() { ctx.save();// 把当前绘图状态保存起来 ct ...

  4. css3 loading效果

    file:///E:/zhangqiangWork/2014/SPDbank/index.html 参考该网站 http://tobiasahlin.com/spinkit/ 查看源代码把里面的dom ...

  5. 【转】 CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… PS:如需转载,请注明出处! 第1种效果: 代码如下: <div class="l ...

  6. CSS3轻松实现清新 Loading 效果

    至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例. 第一种效果: HTM ...

  7. CSS3实现10种Loading效果

    昨晚用CSS3实现了几种常见的Loading效果,虽然很简单,但还是分享一下,顺便也当是做做笔记…… 第1种效果: 代码如下: <div class="loading"> ...

  8. CSS3实现8种Loading效果【第二波】

    原文:CSS3实现8种Loading效果[第二波] 今晚吃完饭回宿舍又捣鼓了另外几种Loading效果,老规矩,直接“上菜“…… 注:gif图片动画有些卡顿,非实际效果! PS:若要转载请注明出处,尊 ...

  9. 用CSS3实现饼状loading效果

    原文地址:http://visugar.com/2017/05/17/CSS3%E9%A5%BC%E7%8A%B6loading%E6%95%88%E6%9E%9C/ 写在前面 (附录有源码及效果) ...

随机推荐

  1. (原+转)win7上编译caffe支持python及matlab

    转载请注明出处: http://www.cnblogs.com/darkknightzh/p/7126126.html 参考网址: https://github.com/happynear/caffe ...

  2. fedora开机出现There is a problem with the configuration server. (/usr/libexec/gconf-sanity-check-2 exited with status 256)

    Install problem!The configuration defaults for GNOME Power Manager have not been installed correctly ...

  3. 如何找出阻止windows睡眠的原因或软件

    1.开始菜单 2.搜索程序和文件里输入 CMD 3.cmd.exe上右键点击以管理员权限运行 4.在cmd黑屏窗口里输入 powercfg -requests如下图所示

  4. 什么是分表和分区 MySql数据库分区和分表方法

    1.为什么要分表和分区 日常开发中我们经常会遇到大表的情况,所谓的大表是指存储了百万级乃至千万级条记录的表.这样的表过于庞大,导致数据库在查询和插入的时候耗时太长,性能低下,如果涉及联合查询的情况,性 ...

  5. O'Reilly总裁提姆-奥莱理:什么是Web 2.0

    O'Reilly总裁提姆-奥莱理:什么是Web 2.0 译者序:Web 2.0这一概念,由O'Reilly媒体公司总裁兼CEO提姆·奥莱理提出.他是美国IT业界公认的传奇式人物,是“开放源码”概念的缔 ...

  6. 安卓PopupWindow+ListView实现登录账号选择下拉框

    这段时间在做android开发,发现自定义下拉框有很多种方法实现,我介绍一种PopupWindow+ListView的方式,实现起来比较灵活.效果: 直接看核心代码: //获取文本框 etLoginN ...

  7. 整合Solr到Tomcat服务器,并配置IK分词

    好久没有接触新东西了,最新开始熟悉solr,实例展示单机环境solr整合. 整合方案一 1.下载Tomcat与solr并解压 Tomcat解压后磁盘路径为D:\program files\Tomcat ...

  8. python学习笔记——提取网页信息BeautifulSoup4

    1 BeautifulSoup概述 beautifulSoup是勇python语言编写的一个HTML/XML的解析器,它可以很好地处理不规范标记并将其生成剖析树(parse tree): 它提供简单而 ...

  9. 如何调试bash脚本

    Bash 是Linux操作系统的默认Shell脚本.Shell是用来处理操作系统和用户交互的一个程序.Shell的脚本可以帮助用户自动化地和操作系统进行交互.你也可以理解为一种脚本式的编程.即然有编程 ...

  10. MyEclipse或Eclipse中project的导入和导出

    project的导入:将project放到对应的目录中--打开MyEclipse--光标定位在PackageExp位置(即project创建位置),右键选中并点击"Import-" ...