效果预览：
http://hovertree.com/texiao/css3/42/

代码如下：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>css3旋转加载效果_何问起</title>

<style>

body {

  background: #263238;

  background-size: cover;

  margin: 0;

  padding-top: 5em;

  padding-bottom: 5em;

}

.container {

  display: flex;

  flex-wrap: wrap;

  height:;

  justify-content: space-around;

  margin: 0 auto;

  max-width: 650px;

  min-width: 200px;

}

.canvas {

  align-items: center;

  background: #eeeeee;

  border-radius: 50%;

  box-shadow: 0 5px 20px rgba(0,0,0,0.2);

  display: flex;

  height: 10em;

  justify-content: center;

  margin: 1em 1em 2em 1em;

  width: 10em;

}

/* Spinner 1 starts here */

.spinner1 {

  align-items: center;

  border: .3em solid transparent;

  border-top: .3em solid #4DB6AC;

  border-right: .3em solid #4DB6AC;

  border-radius: 100%;

  display: flex;

  justify-content: center;

}

.spinnerMax {

  animation: spinnerOne 3s linear infinite;

  height: 3em;

  width: 3em;

}

.spinnerMid {

  animation: spinnerOne 5s linear infinite;

  height: 2.4em;

  width: 2.4em;

}

.spinnerMin {

  animation: spinnerOne 5s linear infinite;

  height: 1.8em;

  width: 1.8em;

}

@keyframes spinnerOne {

  0% {

    transform: rotate(0deg)

  }

  100% {

    transform: rotate(360deg)

  }

}

/* Spinner 1 ends here */

/* Spinner 2 starts here */

.canvas2 {

  position: relative;

}

.spinner2 {

  animation: spinnerTwo 1s linear infinite;

  background: #4DB6AC;

  border-radius: 100px;

  height: 3em;

  transform-origin: top;

  position: absolute;

  top: 50%;

  width: .22em;

}

.hourHand {

  animation: spinnerTwo 7s linear infinite;

  background: #4DB6AC;

  border-radius: 100px;

  height: 2em;

  transform-origin: top;

  position: absolute;

  top: 50%;

  width: .2em;

}

.dot {

  background: #4DB6AC;

  border-radius: 100%;

  height: .5em;

  width: .5em;

}

@keyframes spinnerTwo {

  0% {

    transform: rotate(0deg)

  }

  100% {

    transform: rotate(360deg)

  }

}

/* Spinner 2 ends here */

/* Spinner 3 starts here */

.spinner3 {

  animation: spinnerThree 1s linear infinite;

  background: #4DB6AC;

  border-radius: 100%;

  width: 3em;

  height: 3em;

}

@keyframes spinnerThree {

  0%, 35% {

    background: #4DB6AC;

    transform: scale(1);

  }

  20%, 50% {

    background: #80CBC4;

    transform: scale(1.3);

  }

}

/* Spinner 3 ends here */

/* Spinner 4 starts here */

.spinner4 {

  animation: spinnerFour 1s linear infinite;

  border: solid 7px transparent;

  border-top: solid 7px #4DB6AC;

  border-radius: 100%;

  width: 3em;

  height: 3em;

}

@keyframes spinnerFour {

  0% {

    transform: rotate(0deg);

  }

  100% {

    transform: rotate(360deg);

  }

}

/* Spinner 4 ends here */

/* Spinner 5 starts here */

.spinner5 {

  animation: spinnerFive 1s linear infinite;

  border: solid 1.5em #4DB6AC;

  border-right: solid 1.5em transparent;

  border-left: solid 1.5em transparent;

  border-radius: 100%;

  width: 0;

  height: 0;

}

@keyframes spinnerFive {

  0% {

    transform: rotate(0deg);

  }

  50% {

    transform: rotate(60deg)

  }

  100% {

    transform: rotate(360deg);

  }

}

/* Spinner 5 ends here */

/* Spinner 6 starts here */

.spinner6 {

  background: #4DB6AC;

  border-radius: 50%;

  height: 1em;

  margin: .1em;

  width: 1em;

}

.p1 {

  animation: fall 1s linear .3s infinite;

}

.p2 {

  animation: fall 1s linear .2s infinite;

}

.p3 {

  animation: fall 1s linear .1s infinite;

}

.p4 {

  animation: fall 1s linear infinite;

}

@keyframes fall {

  0% {

    transform: translateY(-15px);

  }

  25%, 75% {

    transform: translateY(0);

  }

  100% {

    transform: translateY(-15px);

  }

}

/* Spinner 6 ends here */

@media (max-width: 600px) {

  .container {

    align-items: center;

    flex-direction: column;

  }

  .canvas {

    margin: 1em;

  }

}

</style>

</head>

<body>

<div class="container">

  <div class="canvas canvas1">

    <div class="spinner1 spinnerMax">

      <div class="spinner1 spinnerMid">

        <div class="spinner1 spinnerMin"></div>

      </div>

    </div>

  </div>

  <div class="canvas canvas2">

    <div class="spinner2"></div>

    <div class="hourHand"></div>

    <div class="dot"></div>

  </div>

  <div class="canvas canvas3">

    <div class="spinner3"></div>

  </div>

  <div class="canvas canvas4">

    <div class="spinner4"></div>

  </div>

  <div class="canvas canvas5">

    <div class="spinner5"></div>

  </div>

  <div class="canvas canvas6">

    <div class="spinner6 p1"></div>

    <div class="spinner6 p2"></div>

    <div class="spinner6 p3"></div>

    <div class="spinner6 p4"></div>

  </div>

</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';color:#ffffff">

<p>适用浏览器：FireFox、Chrome、Opera、Edge、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>

<p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/h/bjag/1afxdrm7.htm" target="_blank">查看代码</a></p>

</div>

</body>

</html>

特效汇总：http://www.cnblogs.com/jihua/p/webfront.html

CSS3扁平化Loading动画特效的更多相关文章

  1. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

  2. 纯CSS3文字Loading动画特效

    纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载

  3. jQuery+CSS3实现404背景动画特效

    效果:http://hovertree.com/texiao/jquery/74/ 源码下载:http://hovertree.com/h/bjaf/ko0gcgw5.htm 效果图如下: 代码如下: ...

  4. Html5和Css3扁平化风格网页

    前言 扁平化概念的核心意义 去除冗余.厚重和繁杂的装饰效果.而具体表现在去掉了多余的透视.纹理.渐变以及能做出3D效果的元素,这样可以让“信息”本身重新作为核心被凸显出来.同时在设计元素上,则强调了抽 ...

  5. 2014圣诞节一款纯css3实现的雪人动画特效

    在2014年的圣诞节,爱编程小编给大家分分享一款纯css3实现的雪人动画特效.该实例实现一个雪人跳动的特效,效果图如下: 在线预览   源码下载 实现的代码. html代码: <span cla ...

  6. 一款简易的CSS3扁平化风格联系表单

    CSS3扁平化风格联系表单是一款CSS3简易联系表单非常清新,整体外观不是那么华丽,但是表单扁平化的风格让人看了非常舒服,同时利用了HTML5元素的特性,表单的验证功能变得也相当简单.经测试效果相当不 ...

  7. 10种CSS3实现的loading动画，挑一个走吧？

    这篇文章主要介绍了10种CSS3实现的loading动画,帮助大家更好的美化自身网页,完成需求,感兴趣的朋友可以了解下. HTML: 1 <body> 2 <div class=&q ...

  8. 【常见】CSS3进度条Loading动画

    现在,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.CSS3的崛起,更使得动态效果得以轻松实现,未来,必定是CSS3的天下,所以今天我就来分享一下几个常见的CSS3进度条Loadi ...

  9. 分享web前端七款HTML5 Loading动画特效集锦

    以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...

随机推荐

  1. 免费赠送原创的opengl电子书教程和案例源码

    免费赠送原创的opengl电子书和案例源码,有兴趣qq群 52391108 下面是一部分教程截图

  2. VNPY - windows 安装踩坑记录

    twisted requires PyHamcrest>=, which is not ins grin requires argparse>=1.1, which is not inst ...

  3. 深度学习硬件：CPU、GPU、FPGA、ASIC

    人工智能包括三个要素:算法,计算和数据.人工智能算法目前最主流的是深度学习.计算所对应的硬件平台有:CPU.GPU.FPGA.ASIC.由于移动互联网的到来,用户每天产生大量的数据被入口应用收集:搜索 ...

  4. Spring实现WebSocket通信

    WebSocket是两个应用之间全双工的通信通道.WebSocket最常见的应用场景是实现服务器和基于浏览器的应用之间的通信. 浏览器中的javascript客户端开启一个到服务器的连接,服务器通过这 ...

  5. gat和post封装代码和爬虫的5个步奏

    1了解需求2根据需求找网站3请求4获取5存储from urllib import request, parsefrom urllib.error import HTTPError, URLError ...

  6. python模块part1

    一.时间模块 1.时间表示形式 在Python中,通常有这三种方式来表示时间:时间戳.元组(struct_time).格式化的时间字符串:(1)时间戳(timestamp) :通常来说,时间戳表示的是 ...

  7. react-native-router-flux

    这是一个路由,可以用来做Android底部的导航栏,学Android的都知道,如果用原生的代码来 做导航栏,会很复杂,关系到很多复杂的知识. 接下来我就简单的说明一下如何插入和使用吧: 1.你要先依赖 ...

  8. java多线程面试中常见知识点

    1．进程和线程 (1)进程是资源分配的最小单位,线程是程序执行的最小单位. (2)进程有自己的独立地址空间,每启动一个进程,系统就会为它分配地址空间,建立数据表来维护代码段.堆栈段和数据段,这种操作非 ...

  9. Mac上实现Python用HTMLTestRunner生成html测试报告

    一.导入HTMLTestRunnerNew文件 首先,我们要知道如果要利用HTMLTestRunnerNew生成测试报告的话,就需要对其进行导入: HTMLTestRunnerNew下载地址:链接:h ...

  10. idea找不到tools.jar下的内容的解决方法

    今天学习javac编译原理时,发现找不到tools.jar. 解决办法:将D:\Program Files\Java\jdk1.8.0_151\lib目录下的tools.jar复制到D:\Progra ...