loading

時間 2019-12-06

標籤 loading 简体版

原文原文鏈接

hey ~ 我是肥陽，後期會持續更新，請記得點贊支持喲
此文主要整理了一下經常使用的css之loading效果css

波紋效果

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.spinner {
  margin: 100px auto;
  width: 50px;
  height: 60px;
  text-align: center;
  font-size: 10px;
}
.spinner > div {
  background-color: #67CF22;
  height: 100%;
  width: 6px;
  display: inline-block;
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}
@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
</style>
</head>
<body>
    <div class="spinner">
        <div class="rect1"></div>
        <div class="rect2"></div>
        <div class="rect3"></div>
        <div class="rect4"></div>
        <div class="rect5"></div>
    </div>
</body>
</html>
複製代碼

圓圈轉動

<html>
  <head>
    <meta charset="utf-8">
    <title>loading效果</title>
    <style>
    html,body{
        height:100%;
        overflow: hidden;
    }
    .div1{
        width:50px;
        height:50px;
        position:relative;
        top:50%;
        left:50%;
        margin:-25px 0 0 -25px;
        border:4px solid #DBDBDB;
        border-radius:50%;
    }
    .div1:after{
        content: "";
        position: absolute;
        width: 10px;
        height: 10px;
        background: #A3A3A3;
        left: 20px;
        top: -7px;
        border-radius: 50%;
        -webkit-transform-origin:5px 32px;
        -moz-transform-origin:5px 32px;
        transform-origin:5px 32px;
        -webkit-animation:rotate .8s ease-in-out infinite;
        -moz-animation:rotate .8s ease-in-out infinite;
        -o-animation:rotate .8s ease-in-out infinite;
        animation:rotate .8s ease-in-out infinite;
    }
    
    @-webkit-keyframes rotate{
        0%{-webkit-transform:rotate(0deg);}
        100%{-webkit-transform:rotate(360deg);}
    }
    @-moz-keyframes rotate{
        0%{-moz-transform:rotate(0deg);}
        100%{-moz-transform:rotate(360deg);}
    }
    @-o-keyframes rotate{
        0%{-o-transform:rotate(0deg);}
        100%{-o-transform:rotate(360deg);}
    }
    @keyframes rotate{
        0%{transform:rotate(0deg);}
        100%{transform:rotate(360deg);}
    }
    </style>
  </head>
  <body>
    <div class="div1"></div>
  </body>
</html>
複製代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

loading

波紋效果

圓圈轉動