zoukankan      html  css  js  c++  java
  • 加载动画css

         <div class="loadEffect">
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
              <span></span>
          </div>
          .loadEffect{
                width: 100px;
                height: 100px;
                position: relative;
                margin: 0 auto;
                margin-top:100px;
            }
            .loadEffect span{
                display: inline-block;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: lightgreen;
                position: absolute;
                -webkit-animation: load 1.04s ease infinite;
            }
            @-webkit-keyframes load{
                0%{
                    -webkit-transform: scale(1.2);
                    opacity: 1;
                }
                100%{
                    -webkit-transform: scale(.3);
                    opacity: 0.5;
                }
            }
    .loadEffect span:nth-child(1){
                left: 0;
                top: 50%;
                margin-top:-10px;
                -webkit-animation-delay:0.13s;
    }
            .loadEffect span:nth-child(2){
                left: 14px;
                top: 14px;
                -webkit-animation-delay:0.26s;
            }
            .loadEffect span:nth-child(3){
                left: 50%;
                top: 0;
                margin-left: -10px;
                -webkit-animation-delay:0.39s;
            }
            .loadEffect span:nth-child(4){
                top: 14px;
                right:14px;
                -webkit-animation-delay:0.52s;
            }
            .loadEffect span:nth-child(5){
                right: 0;
                top: 50%;
                margin-top:-10px;
                -webkit-animation-delay:0.65s;
            }
            .loadEffect span:nth-child(6){
                right: 14px;
                bottom:14px;
                -webkit-animation-delay:0.78s;
            }
            .loadEffect span:nth-child(7){
                bottom: 0;
                left: 50%;
                margin-left: -10px;
                -webkit-animation-delay:0.91s;
            }
            .loadEffect span:nth-child(8){
                bottom: 14px;
                left: 14px;
                -webkit-animation-delay:1.04s;
            }
    
    
    
     
    html部分
    <
    div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
    CSS部分    
    .loading
    { width: 150px; height: 15px; margin: 0 auto; margin-top:100px; } .loading span{ display: inline-block; width: 15px; height: 100%; margin-right: 5px; border-radius: 50%; background: lightgreen; -webkit-animation: load 1.04s ease infinite; } .loading span:last-child{ margin-right: 0px; } @-webkit-keyframes load{ 0%{ opacity: 1; -webkit-transform: scale(1.3); } 100%{ opacity: 0.2; -webkit-transform: scale(.3); } } .loading span:nth-child(1){ -webkit-animation-delay:0.13s; } .loading span:nth-child(2){ -webkit-animation-delay:0.26s; } .loading span:nth-child(3){ -webkit-animation-delay:0.39s; } .loading span:nth-child(4){ -webkit-animation-delay:0.52s; } .loading span:nth-child(5){ -webkit-animation-delay:0.65s; }
  • 相关阅读:
    Python之操作MySQL数据库
    Python之进程与线程
    Python之socket网络编程
    网络基础之网络协议
    Python之log的处理方式
    11 python 操作mysql数据库
    10 线程 协程 socketserver 基于udp的socketserver
    9 异常处理 操作系统 进程线程 队列+生产消费者模型 进程同步 回调函数
    6 常用模块 (time,random,os,sys,shutil, json&pickle, shelve,xml,configparser,hashlib,suprocess,logging)
    ubuntu16上安装安装Docker图形化管理界面-Shipyard中文版
  • 原文地址:https://www.cnblogs.com/szatpig/p/6931990.html
Copyright © 2011-2022 走看看