从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. Serialzers 序列化组件

    Serialzers 序列化组件 前言 当做前后端分离的项目时,JSON是一个轻量级的数据交互格式.所有我们给前端数据的时候都要转成json格式,那就需要对我们从数据库拿到数据进行序列化 Django ...

  2. .Net core Api后台获取数据，异步方法中，数据需采用Linq分页

    .net core api using System.Collections.Generic; using System.Linq; using System.Text.RegularExpressi ...

  3. loj6077. 「2017 山东一轮集训 Day7」逆序对

    题目描述: loj 题解: 容斥+生成函数. 考虑加入的第$i$个元素对结果的贡献是$[0,i-1]$,我们可以列出生成函数. 长这样:$(1)*(1+x)*(1+x+x^2)*--*(1+x+x^2 ...

  4. CF1486X Codeforces Round #703

    C2 Guessing the Greatest (二分+构造) 题目大意:交互题,每次可以询问一个子区间次大值的位置,最多询问20次,问全局最大值的位置.n=1e5 40次的情况大力二分,20次需要 ...

  5. Spring中毒太深，离开了Spring，我居然连最基本的接口都不会写了¯\_(ツ)_/¯

    前言 众所周知,Java必学的框架其中就是SSM,Spring已经融入了每个开发人员的生活,成为了不可或缺的一份子. 随着 Spring 的崛起以及其功能的完善,现在可能绝大部分项目的开发都是使用 S ...

  6. ElasticSearch7.3学习(十五)----中文分词器(IK Analyzer)及自定义词库

    1. 中文分词器 1.1 默认分词器 先来看看ElasticSearch中默认的standard 分词器,对英文比较友好,但是对于中文来说就是按照字符拆分,不是那么友好. GET /_analyze ...

  7. git 的使用(新手)

    git的使用心得 windows版本下载git地址 git config --global user.name 用户名 在使用git前要注册用户名(个人称谓) git config --global ...

  8. kafka-linux-install

    linux按照kafka 必须先按照java jdk包!!!!!!!!!!!! 先安装zookeeper 下载:http://mirrors.hust.edu.cn/apache/zookeeper/ ...

  9. JavaScript 焦点事件

    焦点事件,当一个元素(比如链接或表单)得到或失去焦点时发生. 实例: 1 <!DOCTYPE html> 2 <html lang="en"> 3 < ...

  10. 那么如何使用WebSQL？

    我们需要做的第一步是通过使用"OpenDatabase"函数开放数据库,如下图所示.第一个参数是数据库的名称,接下来是版本,然后一个简单的文本标题,最后的是数据库的大小. var ...