从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. Cobalt Strike之网站克隆

    点击 attack --> Web-dirve-by --> clone file 填写你要克隆的网站.带有端口 Clone URL:克隆目标网站的URL 注意问题:URL需要添加http ...

  2. GitFlow 工作流

    1.概述 GitFlow 工作流定义了一个围绕项目发布的严格分支模型.虽然比功能分支工作流复杂几分,但提供了用于一个健壮的用于管理大型项目的框架. GitFlow 工作流没有用超出功能分支工作流的概念 ...

  3. I 安装饮水机 中国石油大学新生训练赛#10

    问题 I: 安装饮水机 时间限制: 1 Sec  内存限制: 128 MB提交 状态 题目描述 为倡导城市低碳生活,市文明办计划举办马拉松比赛,为确保比赛安全,沿途设置了一些观察点.每个观察点派一个观 ...

  4. Water 2.5.6 发布，一站式服务治理平台

    Water(水孕育万物...) Water 为项目开发.服务治理,提供一站式解决方案(可以理解为微服务架构支持套件).基于 Solon 框架开发,并支持完整的 Solon Cloud 规范:已在生产环 ...

  5. python3 爬虫2--发送请求1

    1urlopen 属于url.request类 我们用urlopen("网址")来发送请求 最基础的发送请求如下 from urllib.request import urlope ...

  6. object 转json 相互转换

    1.object 转json 2.json转object 参考   https://blog.csdn.net/justry_deng/article/details/80780175

  7. zookeeper有几种部署模式？ zookeeper 怎么保证主从节点的状态同步？

    一.zookeeper的三种部署模式 Zookeeper 有三种部署模式分别是单机模式.伪集群模式.集群模式.这三种模式在不同的场景下使用: 单机部署:一般用来检验 Zookeeper 基础功能,熟悉 ...

  8. windows服务器下frp实现内网穿透

    一.操作步骤 1.服务器:首先在服务器上解压到相应目录并配置frps.ini文件如下: 2.服务器:按下windows+R输入cmd进入命令窗口,进入到安装目录下运行frps.exe -c frps. ...

  9. springboot-数据库访问之jpa+mybatis+jdbc的区别

    什么是jdbc jdbc(Java DataBase Connectivity)是java连接数据库操作的原生接口. 什么是jpa jpa(Java Persistence API)是java持久化规 ...

  10. zookeeper 的应用

    不建议使用(单独)zookeeper 做分布式队列,有几点原因,以下原因摘抄于curator的官网: 1.zookeeper有1MB的传输限制.而在队列中,拥有很多的数据节点,通常包括数千个,如果有较 ...