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>
  • 相关阅读:
    html图片预览
    网易DBA私享会分享会笔记2
    网易DBA私享会分享会笔记1
    centos6.5适用的国内yum源:网易、搜狐
    如何去除 ckeditor 上传图片后在原码中留下的 style="width: 100%;height:100px"之类的代码呢?
    关于json.ajax ,php的那点事
    去掉所有的html标签
    about JNI
    some knowledge of maven {maven实战}
    What is Proguard?
  • 原文地址:https://www.cnblogs.com/qishaminghao/p/6382157.html
Copyright © 2011-2022 走看看