从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. kali换源及安装docker

    kali换源及安装docker 以管理员身份运行. 换源,记得先备份, cp /etc/apt/sources.list /etc/apt/sources.list.bak 然后修改/etc/apt/ ...

  2. （九）React Ant Design Pro + .Net5 WebApi：后端环境搭建-IdentityServer4-简单配置

    一.简介 IdentityServer4 是用于 ASP.NET Core 的 OpenID Connect 和 OAuth 2.0 框架,通过中间件的方式集成.JWT(json web token) ...

  3. dev编译器兼容设置及字符串的识别问题

    #include<bits/stdc++.h> using namespace std; bool cmp(char a,char b) { return a>b; } //int ...

  4. vue中TinyMCE图片 “data-mce-src” 属性的问题

    1.问题 在使用Vue中使用TinyMCE富文本编辑器时,上传的图片除了src属性还会多出来个"data-mcee-src" 属性,而保存时实际也是保存的"data-mc ...

  5. Servlet的response乱码问题

    一.response有两种输出流(编码:UTF-8): 1.字节流:response.getOutputStream().write(date.getBytes("UTF-8")) ...

  6. SynchronizedMap 和 ConcurrentHashMap 有什么区别？

    SynchronizedMap 一次锁住整张表来保证线程安全,所以每次只能有一个线程来 访为 map. ConcurrentHashMap 使用分段锁来保证在多线程下的性能. ConcurrentHa ...

  7. Math类有哪些常用的方法

    public static int abs(int a) , public static long abs(long a), public static float abs(float a),  pu ...

  8. idea推送项目到github

    参考: https://blog.csdn.net/SoWhatWorld/article/details/103817786?depth_1-utm_source=distribute.pc_rel ...

  9. 学习Tomcat（二）

    一. Java简介 JDK: 面向开发人员使用的SDK,提供Java的开发环境和运行环境 SDK: 软件开发包,包括函数库.编译程序等 JRE: Java的运行环境,面向Java的使用者,不是开发者 ...

  10. JVM监控工具介绍jstack, jconsole, jinfo, jmap, jdb, jsta

    JVM监控工具介绍 jstack - 如果java程序崩溃生成core文件,jstack工具可以用来获得core文件的java stack和native stack的信息,从而可以轻松地知道java程 ...