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> < ...

随机推荐

angular6 aot 预先编译
angular.json文件:(红色加粗部分) { "$schema": "./node_modules/@angular/cli/lib/config/schema.j ...
OCIEnvCreate 失败,返回代码为 -1,但错误消息文本不可用问题处理
OCIEnvCreate 失败,返回代码为 -1,但错误消息文本不可用问题处理如下: 解决方法一:更换连接方式 config 文件配置: <add name="MASTER_DB&q ...
web plugins
<build> <resources> <resource> <directory>src/main/java</directory> &l ...
idea crack
ThisCrackLicenseId-{ “licenseId”:”11011”, “licenseeName”:”Wechat”, “assigneeName”:”tree-deep-see-dee ...
Yarn架构详解
Yarn架构介绍Yarn/MRv2最基本的想法是将原JobTracker主要的资源管理和job调度/监视功能分开作为两个单独的守护进程.有一个全局的ResourceManager(RM)和每个Appl ...
fpread for asp.net 应用技术点滴
单元格的相对性应用 //收支计算平衡 RC[-1]当前行的前一列;R[1]C下一行的同一列 R[-2]C[2]当前行的前2行,当前列的后2列 this.FpSpread1.Sheets[0].Ref ...
Oracle查询语句导致CPU使用率过高问题处理
解决此问题的关键在于如何找到造成CPU使用率过高的SQL语句.步骤如下: 1.使用Process Explorer工具查看到Oracle进程,双击Oracle进程,在弹出的属性窗口的Threads选项 ...
颜色表及 p em fr
#000000 #2F0000 #600030 #460046 #28004D #272727 #4D0000 #820041 #5E005E #3A006F ...
导航菜单点击图片切换--jquery
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
idea提交项目到码云上
参考 https://www.cnblogs.com/BaleW/p/9293184.html

CSS3实现Loading动画特效

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

随机推荐

热门专题