CSS3实现Loading动画特效

查看效果：
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动画特效的更多相关文章

纯CSS3文字Loading动画特效
纯CSS3文字Loading动画特效是一款个性的loading文字加载动画. 在线演示本地下载
纯css3 加载loading动画特效
最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...
分享web前端七款HTML5 Loading动画特效集锦
以前我们大部分的Loading动画都是利用gif图片实现的,这种图片实现Loading动画的方法虽然也很不错,但是作为HTML5开发者来说,如果能利用HTML5和CSS3实现这些超酷的Loading动 ...
7 款华丽的 HTML5 Loading 动画特效
我们在进行大数据的传输或者复杂操作的等待时,最好能有一个Loading等待的小动画提示用户.本文将为大家分享一些超华丽的基于HTML5的Loading加载动画特效,希望你会喜欢. 1.HTML5 Ca ...
6种炫酷的CSS3按钮边框动画特效
6种炫酷的CSS3按钮边框动画特效Button border animate 用鼠标滑过下面的按钮看看效果! Draw Draw Meet Center Spin Spin Circle Spin T ...
9款超绚丽的HTML5/CSS3应用和动画特效
1.CSS3飘带状3D菜单菜单带小图标这次我们要来分享一款很特别的CSS3菜单,菜单的外观是飘带状的,并且每一个菜单项有一个精美的小图标,鼠标滑过菜单项时,菜单项就会向上凸起,像是飘带飘动一样,形 ...
纯CSS3创意loading文字特效
快速使用Romanysoft LAB的技术实现 HTML 开发Mac OS App,并销售到苹果应用商店中. <HTML开发Mac OS App 视频教程> 土豆网同步更新:http: ...
基于HTML5/CSS3图片网格动画特效
现在HTML5技术可以让网页上的图片变得非常神奇,各种各样的HTML5图片动画特效让你眼花缭乱.今天要分享的这款HTML5图片网格动画特效就非常炫酷.图片缩略图按网格的布局一行行排列,你只需点击按钮即 ...
CSS3扁平化Loading动画特效
效果预览:http://hovertree.com/texiao/css3/42/ 代码如下: <!doctype html> <html> <head> < ...

随机推荐

Python----unittest discover()方法与执行顺序
一.Unittest discover()可以根据不同的功能创建不同的测试文件,甚至是不同的测试目录,测试文件中还可以将不同的小功能划分为不同的测试类,在类下编写测试用例,让整体结构更加清晰一般是通过 ...
IIS环境配置和项目部署
本人实际工作项目中IIS部署,亲测可用~~ 具体步骤: 1.打开控制面板 2.打开程序和功能 3.打开或关闭Windous功能然后勾选相关内容: 4.添加应用程序先打开iis管理器页面(控制面板— ...
[cf contest697] D - Puzzles
[cf contest697] D - Puzzles time limit per test 1 second memory limit per test 256 megabytes input s ...
在浏览器端获取文件的MD5值
前几天接到一个奇怪的需求,要在web页面中计算文件的md5值,还好这个项目是只需兼容现代浏览器的,不然要坑死了. 其实对文件进行md5,对于后端来说是及其简单的.比如使用Node.js,只要下面几行代 ...
Monkey
什么是 Monkey Monkey 是一个 Android 自动化测试小工具.主要用于Android 的压力测试, 主要目的就是为了测试app 是否会Crash. Monkey 特点顾名思义,Mon ...
Daily record-October
October 11. Hope is a good thing, maybe the best of things, and no good thing ever dies. 希望是美好的,也许是人 ...
selenium自动化实例：多层框架中关于iframe的定位，以及select下拉框选择
对于一个自动化的初学者来说会很常见的遇到元素明明存在却始终定位不到, 从而导致脚本报错,当然定位不到元素的原因很多, 其中一种就是多层框架iframe导致的下方截图示意: 下方为写脚本时候的示例并其 ...
实训任务02：Hadoop基础操作
实训任务02:Hadoop基础操作班级学号姓名实训1:创建测试文件上传HDFS,并显示内容需求说明: 在本地计算机上创建测试文件helloH ...
汉明码（Hamming）编码与纠错原理
一汉明码的编解码说明 (一)编码 Hamming(12,8) N=12,表示编码后的比特长度 K=8,待编码数据的比特长度 R=N-K=4,校验位的比特长度 D=3 汉明距离:相邻行之间不同比特数据 ...
centos7 下zookeeper 部署单机多实例模式
centos7 下zookeeper 部署本文参考https://www.linuxidc.com/Linux/2016-09/135052.htm 1.创建/usr/local/zookeeper ...

CSS3实现Loading动画特效

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

随机推荐

热门专题