查看效果：
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. 本地计算机上的 postgresql 服务启动后停止解决方法

    在启动 postgresql 服务是遇到这种情况: 解决方法: 打开计算机管理====>查看应用程序日志信息,可以看出,由于日志配置错误的问题. 找到 postgresql.conf 文件,做如 ...

  2. Spring教程笔记（2） IOC

    Ioc—Inversion of Control,即“控制反转”,不是什么技术,而是一种设计思想,一个重要的面向对象编程的法则,它能指导我们如何设计出松耦合.更优良的程序. 在Java开发中,Ioc意 ...

  3. ACCESS 查询重复记录

    In (SELECT [全称] FROM [New14] As Tmp GROUP BY [全称],[账号],[银行] HAVING Count(*)>1  And [账号] = [New14] ...

  4. 使用该方法在ubuntu下安装flashplayer的rpm包

    Ubuntu的软件包格式是deb,如果要安装rpm的包,则要先用alien把rpm转换成deb. sudo apt-get install alien #alien默认没有安装,所以首先要安装它 su ...

  5. 简要log4j配置

    若排版紊乱可查看我的个人博客原文地址 1. 配置效果 下面的log4j日志配置最终能达到的效果是对于全局日志可以根据级别输入到对应级别的日志文件中,注意低级别的日志文件会同时包含高级别的日志信息,例如 ...

  6. 浅析HashMap的实现原理

    本文参照https://www.cnblogs.com/chengxiao/p/6059914.html#commentform作者的文章,并分享一些自己的体会. 本文将主要回答以下两个问题: 1. ...

  7. spark中map与mapPartitions区别

    在spark中,map与mapPartitions两个函数都是比较常用,这里使用代码来解释一下两者区别 import org.apache.spark.{SparkConf, SparkContext ...

  8. js（含有for if函数）

    1.在定义变量时,尽可能让变量的访问范围最小化 2.弹出单选性别,嵌套for和if函数 <script type="application/javascript">   ...

  9. Thread类源码解析

    源码版本:jdk8 其中的部分论证和示例代码:Java_Concurrency 类声明: Thread本身实现了Runnable接口 Runnable:任务,<java编程思想>中表示该命 ...

  10. node.js安装使用express框架

    官网:http://www.expressjs.com.cn/ 使用方式(如果后面需要添加路由等推荐第二种方式,不然需要需要手动添加):一.自己动手搭建 1. 新建项目文件夹,如test,并在命令行中 ...