master

分支 (1)

管理

管理

master

cnblog_theme_atum
/
shade.html

<!DOCTYPE html>
<html lang="en" >
<body>
<style type="text/css">
  body {
    margin:0;
    padding:0;
    overflow:hidden;
    margin-top:100%
  }
  #shade_animal_wrap {
    opacity:1;
    margin:0;
    padding:0;
    display:flex;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    align-items:center;
    justify-content:center;
    height:100vh;
    width:100%;
    background-color:#f2f2f2;
    z-index:99999;
    transition:all 1s ease 0s;

  }
  .lds-hourglass {
    display: inline-block;
    position: relative;
    width: 64px;
    height: 64px;
    transform: translateY(-60px);
  }
  .lds-hourglass:after {
    content: " ";
    display: block;
    border-radius: 50%;
    width: 0;
    height: 0;
    margin: 6px;
    box-sizing: border-box;
    border: 60px solid #fff;
    border-color: #ff8d00 transparent #ff3004 transparent;
    animation: lds-hourglass 1.2s infinite;
  }
  @keyframes lds-hourglass {
    0% {
      transform: rotate(0);
      animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }
    50% {
      transform: rotate(900deg);
      animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    100% {
      transform: rotate(1800deg);
    }
  }

</style>
<div id="shade_animal_wrap">
  <div class="lds-hourglass"></div>
</div>
</body>
</html>