查看效果：
http://hovertree.com/texiao/css3/43/

代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>css3 loading等待加载代码 - 何问起</title>

    <style>

        @keyframes move {

            from {

                transform: translate(0,50%);

            }

            to {

                transform: translate(0,850%);

            }

        }

        * {

            margin: 0;

            padding: 0;

        }

        body {

            min-width: 325px;

            height: 100vh;

            display: flex;

            flex-wrap: wrap;

            justify-content: space-around;

            align-items: center;

            align-content: flex-start;

            background: #2a2a2a;

        }

        figure {

            margin: 30px;

            width: 250px;

            height: 250px;

            border-radius: 50%;

            position: relative;

            background: #1c1c1c;

        }

        section {

            width: 10%;

            height: 100%;

            position: absolute;

            left: 45%;

        }

            section:nth-child(2) {

                transform: rotate(22.5deg);

            }

            section:nth-child(3) {

                transform: rotate(45deg);

            }

            section:nth-child(4) {

                transform: rotate(67.5deg);

            }

            section:nth-child(5) {

                transform: rotate(90deg);

            }

            section:nth-child(6) {

                transform: rotate(112.5deg);

            }

            section:nth-child(7) {

                transform: rotate(135deg);

            }

            section:nth-child(8) {

                transform: rotate(157.5deg);

            }

        figure div {

            height: 10%;

            border-radius: 50%;

            background: dodgerblue;

            animation: move 1s ease-in-out infinite alternate;

        }

        figure:nth-child(1) > section:nth-child(1) > div {

            animation-delay: -0.1875s;

        }

        figure:nth-child(1) > section:nth-child(2) > div {

            animation-delay: -0.175s;

        }

        figure:nth-child(1) > section:nth-child(3) > div {

            animation-delay: -0.1625s;

        }

        figure:nth-child(1) > section:nth-child(4) > div {

            animation-delay: -0.15s;

        }

        figure:nth-child(1) > section:nth-child(5) > div {

            animation-delay: -0.9375s;

        }

        figure:nth-child(1) > section:nth-child(6) > div {

            animation-delay: -0.925s;

        }

        figure:nth-child(1) > section:nth-child(7) > div {

            animation-delay: -0.9125s;

        }

        figure:nth-child(1) > section:nth-child(8) > div {

            animation-delay: -0.9s;

        }

        figure:nth-child(2) > section:nth-child(1) > div {

            animation-delay: -0.875s;

        }

        figure:nth-child(2) > section:nth-child(2) > div {

            animation-delay: -0.75s;

        }

        figure:nth-child(2) > section:nth-child(3) > div {

            animation-delay: -0.625s;

        }

        figure:nth-child(2) > section:nth-child(4) > div {

            animation-delay: -0.5s;

        }

        figure:nth-child(2) > section:nth-child(5) > div {

            animation-delay: -0.375s;

        }

        figure:nth-child(2) > section:nth-child(6) > div {

            animation-delay: -0.25s;

        }

        figure:nth-child(2) > section:nth-child(7) > div {

            animation-delay: -0.125s;

        }

        figure:nth-child(3) > section:nth-child(1) > div {

            animation-delay: -0.5s;

        }

        figure:nth-child(3) > section:nth-child(3) > div {

            animation-delay: -0.5s;

        }

        figure:nth-child(3) > section:nth-child(5) > div {

            animation-delay: -0.5s;

        }

        figure:nth-child(3) > section:nth-child(7) > div {

            animation-delay: -0.5s;

        }

        figure:nth-child(4) > section:nth-child(1) > div {

            animation-delay: -0.35s;

        }

        figure:nth-child(4) > section:nth-child(2) > div {

            animation-delay: -0.3s;

        }

        figure:nth-child(4) > section:nth-child(3) > div {

            animation-delay: -0.25s;

        }

        figure:nth-child(4) > section:nth-child(4) > div {

            animation-delay: -0.2s;

        }

        figure:nth-child(4) > section:nth-child(5) > div {

            animation-delay: -0.15s;

        }

        figure:nth-child(4) > section:nth-child(6) > div {

            animation-delay: -0.1s;

        }

        figure:nth-child(4) > section:nth-child(7) > div {

            animation-delay: -0.05s;

        }

    </style>

    <script src="js/prefixfree.min.js"></script>

</head>

<body>

    <figure>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

    </figure>

    <figure>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

    </figure>

    <figure>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

    </figure>

    <figure>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

        <section><div></div></section>

    </figure>

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

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

        <p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a></p>

    </div>

</body>

</html>

web前端特效：http://www.cnblogs.com/jihua/p/webfront.html

CSS3实现Loading动画特效的更多相关文章

  1. 纯CSS3文字Loading动画特效

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

  2. 纯css3 加载loading动画特效

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

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

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

  4. 7 款华丽的 HTML5 Loading 动画特效

    我们在进行大数据的传输或者复杂操作的等待时,最好能有一个Loading等待的小动画提示用户.本文将为大家分享一些超华丽的基于HTML5的Loading加载动画特效,希望你会喜欢. 1.HTML5 Ca ...

  5. 6种炫酷的CSS3按钮边框动画特效

    6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...

  6. 9款超绚丽的HTML5/CSS3应用和动画特效

    1.CSS3飘带状3D菜单 菜单带小图标 这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...

  7. 纯CSS3创意loading文字特效

    快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中.   <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...

  8. 基于HTML5/CSS3图片网格动画特效

    现在HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱.今天要分享的这款HTML5图片网格动画特效就非常炫酷.图片缩略图按网格的布局一行行排列,你只需点击按钮即 ...

  9. CSS3扁平化Loading动画特效

    效果预览:http://hovertree.com/texiao/css3/42/ 代码如下: <!doctype html> <html> <head> < ...

随机推荐

  1. python - 初识面向对象

    1.初识面向对象       面向过程:一切以事务的发展流程为中心           优点:负责的问题流程化,编写相对简单         缺点:可扩展性差,只能解决一个问题,改造也会很困难,牵一发 ...

  2. dubbo基础学习总结

    Dubbo基本原理机制 分布式服务框架: –高性能和透明化的RPC远程服务调用方案 –SOA服务治理方案 -Apache MINA 框架基于Reactor模型通信框架,基于tcp长连接 Dubbo缺省 ...

  3. Spring Boot：Spring Boot 中 Redis 的使用

    Redis 介绍 Redis 是目前业界使用最广泛的内存数据存储.相比 Memcached,Redis 支持更丰富的数据结构,例如 hashes, lists, sets 等,同时支持数据持久化.除此 ...

  4. Ubuntu下安装chrome浏览器

    1.在终端中,输入以下命令: sudo wget http://www.linuxidc.com/files/repo/google-chrome.list -P /etc/apt/sources.l ...

  5. Data assimilation

    REF: https://en.wikipedia.org/wiki/Data_assimilation Data assimilation is the process by which obser ...

  6. js 统计字符串中字符出现的次数

    var str='abbcccdddd';var obj={};for(var i=0;i<str.length;i++){ var key=str.charAt(i); if(obj[key] ...

  7. react系列笔记：第二记-中间件

    中间件所做的事情就是在action发起后,到reducer之前做扩展,实现的方式是对store的dispatch进行包装 store.dispatch => [middlewales] => ...

  8. php字符串转数组

    下面代码包括了含有中文汉字的字符. function str2arr($str) { $length = mb_strlen($str, 'utf-8'); $array = []; for ($i= ...

  9. Python_day1 Learning record

    Python Day1 Learning record(python第一天学习记录) 一.ptyhon安装 windows .下载安装包 https://www.python.org/download ...

  10. Linux 安装python3.4

    不要动现有的python2环境! 不要动现有的python2环境! 不要动现有的python2环境! 默认yum好用 默认环境不全 1. 安装环境 yum -y install zlib zlib-d ...