查看效果：
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. Ubuntu LNMP系统搭建Zabbix监控

    系统环境 操作系统类型:Ubuntu 系统环境版本:4.4.0-122-generic IP地址:192.168.152.118 第一步:选择适当的操作系统类型与各项的版本要求,我这边直接使用LNMP ...

  2. 用HTML+CSS编写一个计科院网站首页的静态网页

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 苹果手机的SB系列（1）听不懂人话的sir

    写在前面,因手买错了(至于怎么买错了不解释)手机才买了一个苹果,价格不扉,但实在让人很不爽．记下了SB的点点． Sir听不懂人话,我让他查非洲安哥拉的时间,却屡次返回美国安哥拉洲的时间,很自恋．

  4. C# Winform 通过Socket实现客户端和服务端TCP通信

    操作界面如下: 1.声明Socket 第一个参数:寻址方式,第二个参数:传输数据的方式,第三个参数:通信协议 Socket socket = new Socket(AddressFamily.Inte ...

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

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

  6. vivado2015.4保存ila波形数据

    reference: https://www.cnblogs.com/pejoicen/p/d8b3c4f3aa29b8de7963893d4b99d361.html Vivado2015.4下,il ...

  7. UVa-156 Ananagrams(map映射)

    #include <iostream> #include <algorithm> #include <cmath> #include <cstdio> ...

  8. ajax csrf

    data 里加 csrfmiddlewaretoken:$("[name='csrfmiddlewaretoken']").val(), 还要再 form表单里加{% csrf_t ...

  9. docker学习构建镜像---第三章节

    一.docker镜像使用 运行docker容器时,使用的镜像如果在本地不存在,docker会自动从docker镜像仓库中下载,默认是从docker hub公共镜像源下载 在这里,我们需要了解:管理和使 ...

  10. Problem 5: Smallest multiple

    2520 is the smallest number that can be divided by each of the numbers from 1 to 10 without any rema ...