zoukankan      html  css  js  c++  java
  • CSS实现四种loading动画效果

      四种loading加载效果:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>四种加载效果</title>
    <style>
    /*第一种*/
    .demo1 {
         4px;
        height: 4px;
        border-radius: 2px;
        background: #68b2ce;
        float: left;
        margin: 0 3px;
        animation: demo1 linear 1s infinite;
        -webkit-animation: demo1 linear 1s infinite;
    }
    .demo1:nth-child(1){
        animation-delay:0s;
    }
    .demo1:nth-child(2){
        animation-delay:0.15s;
    }
    .demo1:nth-child(3){
        animation-delay:0.3s;
    }
    .demo1:nth-child(4){
        animation-delay:0.45s;
    }
    .demo1:nth-child(5){
        animation-delay:0.6s;
    }
    @keyframes demo1{
        0%,60%,100% {transform: scale(1);}
        30% {transform: scale(2.5);}
    }
    @-webkit-keyframes demo1{
        0%,60%,100% {transform: scale(1);}
        30% {transform: scale(2.5);}
    }
    /*第二种*/
    .demo2 {
         4px;
        height: 6px;
        background: #68b2ce;
        float: left;
        margin: 0 3px;
        animation: demo2 linear 1s infinite;
        -webkit-animation: demo2 linear 1s infinite;
    }
    .demo2:nth-child(1){
        animation-delay:0s;
    }
    .demo2:nth-child(2){
        animation-delay:0.15s;
    }
    .demo2:nth-child(3){
        animation-delay:0.3s;
    }
    .demo2:nth-child(4){
        animation-delay:0.45s;
    }
    .demo2:nth-child(5){
        animation-delay:0.6s;
    }
    @keyframes demo2{
        0%,60%,100% {transform: scale(1);}
        30% {transform: scaleY(3);}
    }
    @-webkit-keyframes demo2{
        0%,60%,100% {transform: scale(1);}
        30% {transform: scaleY(3);}
    }
    /*第三种*/
    #loading3 {
        position: relative;
         50px;
        height: 50px;
    }
    .demo3 {
         4px;
        height: 4px;
        border-radius: 2px;
        background: #68b2ce;
        position: absolute;
        animation: demo3 linear 0.8s infinite;
        -webkit-animation: demo3 linear 0.8s infinite;
    }
    .demo3:nth-child(1){
        left: 24px;
        top: 2px;
        animation-delay:0s;
    }
    .demo3:nth-child(2){
        left: 40px;
        top: 8px;
        animation-delay:0.1s;
    }
    .demo3:nth-child(3){
        left: 47px;
        top: 24px;
        animation-delay:0.1s;
    }
    .demo3:nth-child(4){
        left: 40px;
        top: 40px;
        animation-delay:0.2s;
    }
    .demo3:nth-child(5){
        left: 24px;
        top: 47px;
        animation-delay:0.4s;
    }
    .demo3:nth-child(6){
        left: 8px;
        top: 40px;
        animation-delay:0.5s;
    }
    .demo3:nth-child(7){
        left: 2px;
        top: 24px;
        animation-delay:0.6s;
    }
    .demo3:nth-child(8){
        left: 8px;
        top: 8px;
        animation-delay:0.7s;
    }
    @keyframes demo3{
        0%,40%,100% {transform: scale(1);}
        20% {transform: scale(3);}
    }
    @-webkit-keyframes demo3{
        0%,40%,100% {transform: scale(1);}
        20% {transform: scale(3);}
    }
    /*第四种*/
    #loading5 {
         20px;
        height: 100px;
        border-bottom: 1px solid #68b2ce;
    }
    .demo5 {
         20px;
        height: 20px;
        border-radius: 10px;
        background: #68b2ce;
        animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;
        -webkit-animation: demo5 cubic-bezier(0.5,0.01,0.9,1) 0.6s infinite alternate;
    }
    @keyframes demo5{
        0%{
            transform:translateY(0px);
            -webkit-transform:translateY(0px);
        }
        100%{
            transform:translateY(80px);
            -webkit-transform:translateY(80px);
        }
    }
    @-webkit-keyframes demo5{
        0%{
            transform:translateY(0px);
            -webkit-transform:translateY(0px);
        }
        100% {
            transform:translateY(80px);
            -webkit-transform:translateY(80px);
        }
    }
    </style>
    <body>
        <div id="loading1">
            <div class="demo1"></div>
            <div class="demo1"></div>
            <div class="demo1"></div>
            <div class="demo1"></div>
            <div class="demo1"></div>
        </div>
        <div id="loading2">
            <div class="demo2"></div>
            <div class="demo2"></div>
            <div class="demo2"></div>  
            <div class="demo2"></div>
            <div class="demo2"></div>
        </div>
        <div id="loading3">
            <div class="demo3"></div>
            <div class="demo3"></div>
            <div class="demo3"></div>
            <div class="demo3"></div>
            <div class="demo3"></div>
            <div class="demo3"></div>
            <div class="demo3"></div>
            <div class="demo3"></div>
        </div>
        <div id="loading5">
            <div class="demo5"></div>
        </div>
    </body>
    </html>
  • 相关阅读:
    AcWing 838. 堆排序
    AcWing 240. 食物链
    Sublime下载地址
    【转载】Java 8 Optional的正确姿势
    【SpringBoot】通过server.servlet.context-path设置应用的上下文路径
    【java/Lamda】List.stream().collect(Collectors.toMap(Emp::getId, a->a,(k1,k2)->k2))的意义
    Prometheus修改数据保留时间
    Atitit BLE 协议栈 艾提拉总结 目录 1. ——关于BLE的一些基本概念——
    Atitit 高并发设计实践 艾提拉著 目录 1. 并发的实现俩中模式 并发角度来看 基于事件触发vs线程的 1 2. 负载均衡 1 2.1. 云服务模型paas caas faas+http
    Atitit 锁的不同层级 app锁 vm锁 os锁 硬件锁 目录 1. 在硬件层面,CPU提供了原子操作、关中断、锁内存总线的机制 1 1.1. test and set指令 1 1.2. 锁内
  • 原文地址:https://www.cnblogs.com/goloving/p/7684564.html
Copyright © 2011-2022 走看看