zoukankan      html  css  js  c++  java
  • loading动画

    HTML:
    <div class="box">
    <div class="load">
    <div class="loader">
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    <i></i>
    </div>
    </div>
    </div>

    CSS:
    <style>
      .box {
       100%;
      height: 300px;
      }
        .load {
    300px;
    height: 300px;
    margin-left: 100px;
    background-color: gray;
    display:flex;
    align-items:center;
    justify-content:center;
    }
    .loader{
    position:relative;
    }
    .load i {
    display: block;
    20px;
    height: 3px;
    background-color: white;
    position:absolute;
    -webkit-animation:loads 1s ease -1s infinite;
    }
    .load i:nth-child(1){
    top:-50px;
    left:0;
    transform:rotateZ(90deg);
    -webkit-animation:loads 1s ease -0.9s infinite;
    }
    .load i:nth-child(2){
    top:-35px;
    left:35px;
    transform:rotateZ(150deg);
    -webkit-animation:loads 1s ease -0.8s infinite;
    }
    .load i:nth-child(3){
    top:-10px;
    left:50px;
    transform:rotateZ(0deg);
    -webkit-animation:loads 1s ease -0.7s infinite;
    }
    .load i:nth-child(4){
    top:15px;
    left:50px;
    transform:rotateZ(20deg);
    -webkit-animation:loads 1s ease -0.6s infinite;
    }
    .load i:nth-child(5){
    top:38px;
    left:40px;
    transform:rotateZ(40deg);
    -webkit-animation:loads 1s ease -0.5s infinite;
    }
    .load i:nth-child(6){
    top:50px;
    left:0;
    transform:rotateZ(90deg);
    -webkit-animation:loads 1s ease -0.4s infinite;
    }
    .load i:nth-child(7){
    top:40px;
    left:-35px;
    transform:rotateZ(120deg);
    -webkit-animation:loads 1s ease -0.3s infinite;
    }
    .load i:nth-child(8){
    top:15px;
    left:-50px;
    transform:rotateZ(150deg);
    -webkit-animation:loads 1s ease -0.2s infinite;
    }
    .load i:nth-child(9){
    top:-10px;
    left:-50px;
    -webkit-animation:loads 1s ease -0.1s infinite;
    }
    .load i:nth-child(10){
    top:-35px;
    left:-35px;
    transform:rotateZ(30deg);
    -webkit-animation:loads 1s ease 0s infinite;
    }
    @-webkit-keyframes loads{
    0%{
    opacity:1;
    }
    25%{
    opacity:0.75;
    }
    50%{
    opacity:0.5;
    }
    75%{
    opacity:0.25;
    }
    100%{
    opacity:0;
    }
    }
    </style>
  • 相关阅读:
    POJ 1011Sticks
    zz 深入浅出CGlib打造无入侵的类代理
    教你如何用SQL备份和还原数据库
    sql server 2008 评估期已过期解决办法
    C# 第三方分页控件的使用
    Listbox移除
    Winwos server2008 IE安全级别设置
    验证手机号码和固定电话正则表达式
    SQL 左外连接,右外连接,全连接,内连接 4种连接的区别
    SQL TOP 和 DISTINCT 结合使用
  • 原文地址:https://www.cnblogs.com/qishaminghao/p/6382157.html
Copyright © 2011-2022 走看看