查看效果：
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. BinDiff安装使用教程

    一.说明 大概一两年前在<漏洞战争:软件漏洞分析精要>听到bindiff(和补丁比较法),但一直都没去使用.前两天再回头看书感觉需要使用一翻,整个过程下来还是遇到了一些问题,值得记录一番. ...

  2. 【性能测试】LoadRunner11安装（包含破解、汉化）

    LoadRunner安装(包含破解.汉化) 安装LoadRunner a.以解压包的方式打开[性能测试工具LR11.00].loadrunner-11.iso文件,运行“setup.ext”(花费时间 ...

  3. mysql排序之ORDER BY IF、ORDER BY配合IN、TIMESTAMPDIFF、TIMESTAMPADD、FIELD

    1.order by if 排序 SELECT * FROM pet ORDER BY if (species='snake',0,1),species;--species为snake的行数放置到了查 ...

  4. "No entity found for query"(转)

    很久以前一直用EntityManager下getResultList()查询数据,即便一个数据亦是如此,所以要频繁的List.get(0).新接口getSingleResult()出现了,然后就开始频 ...

  5. Spring声明式事务配置详解

    Spring支持编程式事务管理和声明式的事务管理. 编程式事务管理 将事务管理代码嵌到业务方法中来控制事务的提交和回滚 缺点:必须在每个事务操作业务逻辑中包含额外的事务管理代码 声明式事务管理 一般情 ...

  6. C#Mvc4.0IIS部署（内网）

    安装IIS(百度中搜索教程安装) 在Vs中将项目发布到文件夹 回到桌面,右键计算机=>管理=>服务和应用程序=>Internet信息服务(IIS)管理器 右键添加新网站,输入网站名称 ...

  7. Django框架教程之正则表达式URL误区详解

    问题:我学习的视频大概是2015年录的,里面用的Django版本比较老关于正则表达式URL这一块都是用的url(“url(r'^admin/', admin.site.urls),”)方法.而我自己练 ...

  8. 记一次 SSM 分页

    1.实体层(entity,pojo,domain) package com.entity; import java.io.Serializable; private int totalCount; / ...

  9. 开发工具IntelliJ IDEA的安装与操作

    开发工具IntelliJ IDEA的安装与操作 1.1 开发工具概述 IDEA是一个专门针对Java的集成开发工具(IDE),它可以极大地提升我们的开发效率.可以自动编译,检查错误.在公司中,使用的就 ...

  10. ReactiveCocoa的学习内容

    ReactiveCocoa • 知识备用库:iOS10 collectionView以前是复用的,但是iOS10以后就要设置一个属性才可以复用. • C语言面向过程编程,OC面向对象编程 • 链式编程 ...