从jq官网上摘抄下来的一个简单加载动画，个人比较喜欢使用~存在这里，作为记录

话不多说~上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 登陆动画 */
        .loader {
            width: 90px;
            height: 42px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%);
        }
        #logining {
            /* display: none; */
            width: 447px;
            height: 438px;
            /* background-color: rgba(255, 255, 255, 0.3); */
            position: relative;
            top: 0;
            left: 0;
            text-align: center;
            font-size: 24px;
            color: #cccccc;
            background: rgba(4, 49, 75, 0.7);
            overflow: hidden;
        }
        #logining p {
            margin-top: 150px;
        }
        .css-square {
            position: absolute;
            top: 0;
            left: 0;
            width: 25px;
            height: 7px;
            background: #cccccc;
            box-shadow: 2px 2px 3px 0px black;
        }
        .square1 {
            left: 70px;
            -webkit-animation: dominos 1s 0.125s ease infinite;
            animation: dominos 1s 0.125s ease infinite;
        }
        .square2 {
            left: 60px;
            -webkit-animation: dominos 1s 0.3s ease infinite;
            animation: dominos 1s 0.3s ease infinite;
        }
        .square3 {
            left: 50px;
            -webkit-animation: dominos 1s 0.425s ease infinite;
            animation: dominos 1s 0.425s ease infinite;
        }
        .square4 {
            left: 40px;
            -webkit-animation: dominos 1s 0.540s ease infinite;
            animation: dominos 1s 0.540s ease infinite;
        }
        .square5 {
            left: 30px;
            -webkit-animation: dominos 1s 0.665s ease infinite;
            animation: dominos 1s 0.665s ease infinite;
        }
        .square6 {
            left: 20px;
            -webkit-animation: dominos 1s 0.79s ease infinite;
            animation: dominos 1s 0.79s ease infinite;
        }
        .square7 {
            left: 10px;
            -webkit-animation: dominos 1s 0.9s ease infinite;
            animation: dominos 1s 0.9s ease infinite;
        }
        .square8 {
            left: 0px;
            -webkit-animation: dominos 1s 1s ease infinite;
            animation: dominos 1s 1s ease infinite;
        }
        @-webkit-keyframes loader-1-outter {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @keyframes loader-1-outter {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
            }
        }
        @-webkit-keyframes dominos {
            50% {
                opacity: 0.7;
            }
            75% {
                -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
            }
            80% {
                opacity: 1;
            }
        }
        @keyframes dominos {
            50% {
                opacity: 0.7;
            }
            75% {
                -webkit-transform: rotate(90deg);
                transform: rotate(90deg);
            }
            80% {
                opacity: 1;
            }
        }
    </style>
</head>
<body>
    <div id="logining">
        <p>加载中...</p>
        <section>
            <div class="loader ">
                <div class="css-square square1"></div>
                <div class="css-square square2"></div>
                <div class="css-square square3"></div>
                <div class="css-square square4"></div>
                <div class="css-square square5"></div>
                <div class="css-square square6"></div>
                <div class="css-square square7"></div>
                <div class="css-square square8"></div>
            </div>
        </section>
    </div>
</body>
</html>

css加载动画（纯css和html）的更多相关文章

  1. 为网格布局图片打造的超炫 CSS 加载动画

    今天,我想与大家分享一些专门为网格布局的图像制作的很酷的 CSS 加载动画效果.您可以把这些效果用在你的作品集,博客或任何你想要的网页中.设置很简单.我们使用了下面这些工具库来实现这个效果: Norm ...

  2. CSS 加载动画

    CSS加载动画 实现加载动画效果,需要的两个关键步骤: 1.做出环形外观 border:16px solid #f3f3f3; border-radius:50%; border-top:16px s ...

  3. css加载动画...

    加载动画... <p>加载动画...</p> <p> </p> <p> </p> <style><!-- .c ...

  4. 好用的纯CSS加载动画-spinkit

    首先放一个css  spinkit <style> .loaders{ width: 100%; height: 100%; padding: 100px; box-sizing: bor ...

  5. 炫！一组单元素实现的 CSS 加载进度提示效果

    之前的文章个大家分享过各种类型的加载效果(Loading Effects),这里再给大家奉献一组基于单个元素实现的 CSS 加载动画集合.这些加载效果都是基于一个 DIV 元素实现的,十分强悍. 温馨 ...

  6. 动态加载js、css 代码

    一.原生js: /** * 加载js和css文件 * @param jsonData.path 前缀路径 * @param jsonData.url 需要加载的js路径或css路径 * @param ...

  7. HTML加载动画实现

    在页面加载完成之前或者执行某操作时,先显示要显示的加载动画. 实现原理 先定义一个加载动画元素(最好是纯CSS实现,图片的话可能慢一点),当页面未加载完成之前,先使其"可见",当页 ...

  8. 弹跳加载动画特效Bouncing loader

    一款非常常用的css 加载动画,这款CSS3 Loading动画主要由几个小球通过规律的上下跳动,渐隐渐显而成,效果十分生动.流畅.兼容IE8以上,尤其适合在移动端中使用,基本代替了图片实现加载的效果 ...

  9. 纯 HTML/CSS 高仿 Win10 加载动画

    自己做的超高仿Win10加载动画(应该是全网最像的 HTML 实现了),自己想用就拿去用吧 转圈加载 在线演示 HTML: <div class="loading"> ...

随机推荐

  1. kubernetes集群节点多网卡，calico指定网卡

    kubernetes集群节点多网卡,calico指定网卡 1.calico如果有节点是多网卡,所以需要在配置文件中指定内网网卡 spec: containers: - env: - name: DAT ...

  2. 17调试经验之串口读写flash协议

    一是设计功能 我的理解协议就是一个命令包,通过给出不同的控制命令,来调动不同的功能模块,实现不同的功能,如读数据,写数据,擦除等. 二设计过程 先看了尤老师的视频,主要讲了大致设计原理和总体框架,当然 ...

  3. 论文写作中快速更新Word里面交叉引用的编号，巧用MathType

    点击插入编号>>更新,即可快速更新交叉引用的编号,不用一个一个更新域!

  4. 为什么使用 Executor 框架？

    每次执行任务创建线程 new Thread()比较消耗性能,创建一个线程是比较耗时. 耗资源的. 调用 new Thread()创建的线程缺乏管理,被称为野线程,而且可以无限制的创建, 线程之间的相互 ...

  5. spring-boot-learning-事务处理

     事务处理的重要性: 面对高井发场景, 掌握数据库事务机制是至关重要的,它能够帮助我们在一定程度上保证数据的一致性,并且有效提高系统性能,避免系统产生岩机,这对于互联网企业应用的成败是至关重要的. 以 ...

  6. 解释 JDBC 抽象和 DAO 模块？

    通过使用 JDBC 抽象和 DAO 模块,保证数据库代码的简洁,并能避免数据库资源 错误关闭导致的问题,它在各种不同的数据库的错误信息之上,提供了一个统一 的异常访问层.它还利用 Spring 的 A ...

  7. 哪些浏览器支持HTML 5？

    几乎所有的浏览器都支持HTML 5,例如Safari,Chrome,火狐,Opera,IE等.

  8. spring 提供了哪些配置方式？

    基于 xml 配置 bean 所需的依赖项和服务在 XML 格式的配置文件中指定.这些配置文件通常 包含许多 bean 定义和特定于应用程序的配置选项.它们通常以 bean 标签开 头. 例如: &l ...

  9. SDS-redis动态字符串

    与C语言类似,redis自己创建了简单动态字符串SDS(Simple Dynamic String)即简单动态字符串,创建字符串类型的键值对,SDS表示字符串值,键值对的值为字符串对象 SDS用途可以 ...

  10. 无需Flash录视频——HTML5中级进阶

    前言 HTML5的权限越来越大了,浏览器可以直接调用摄像头.麦克风了,好激动啊.我们要用纯洁的HTML代码造出自己的天地. 视频采集 本篇介绍的栗子 都是在chrome 47 版本以上的,低版本的可能 ...