CSS動畫實例：Loading加載動畫效果（二）

時間  2020-08-21
標籤 css 動畫 實例 loading 加載 效果 欄目 CSS 简体版
原文   原文鏈接

2．條狀型Loading

      這類Loading動畫的基本思想是：在呈現容器中定義一個或多個子層，再對每一個子層進行樣式定義，使得其顯示爲一個條形或方形，最後編寫關鍵幀動畫控制，使得各個條形（或方形）的大小、位置、填充色等發生變化或者進行旋轉。html

      （1）多個豎條進行變化的加載效果。瀏覽器

      例如，編寫以下的HTML文件。ide

<!DOCTYPE html>
<html>
<head>
<title>Loading加載動畫</title>
<style>
   .container
   {
      margin: 0 auto;
      width: 300px;
      height:300px;
      position: relative;
      display:flex;
      justify-content:center;
      align-items:center;
      background:#d8d8d8;
      border: 4px solid rgba(255, 0, 0, 0.9);
      border-radius: 10%;
   }
   .shape
   {
       width: 10px;
       height: 100px;
       margin: 5px;
       display: inline-block; 
       border-radius: 4px;  
       background-color: #00ff00;  
       animation: loading 1s infinite ease;
   }
   .shape:nth-child(1n+0) 
   {
      animation-delay:var(--delay);
   }
   @keyframes loading 
   {
      0%,40%,100% { transform: scaleY(0.5); }
      20% { transform: scaleY(1); }
   }
</style>
</head>
<body>
<div  class="container">
    <div class="shape" style="--delay:0s;"></div>
    <div class="shape" style="--delay:0.2s;"></div>
    <div class="shape" style="--delay:0.4s;"></div>
    <div class="shape" style="--delay:0.6s;"></div>
    <div class="shape" style="--delay:0.8s;"></div>
</div>    
</body>
</html>
View Code

      在瀏覽器中打開包含這段HTML代碼的html文件，能夠呈現出如圖16所示的Loading動畫效果。flex

 

圖16  Loading動畫效果（11）動畫

      如將上面代碼中的關鍵幀定義改寫以下：spa

   @keyframes loading指針

   {code

       0%,100% orm

       {  htm

            height: 50px;  

            background: #00ff00;  

       }  

       50%

       {  

            height: 80px;  

            background: #0000ff;  

       }  

   }  

則呈現出如圖17所示的Loading動畫效果。

 

圖17  Loading動畫效果（12）

      （2）方形3D旋轉加載效果。

       編寫以下的HTML文件。

<!DOCTYPE html>
<html>
<head>
<title>Loading加載動畫</title>
<style>
   .container
   {
      margin: 0 auto;
      width: 300px;
      height:300px;
      position: relative;
      display:flex;
      justify-content:center;
      align-items:center;
      background:#d8d8d8;
      border: 4px solid rgba(255, 0, 0, 0.9);
      border-radius: 10%;
   }
   .shape
   {
      width: 100px;
      height: 100px;
      background-color: #ffc800;
      animation: rotate 1.2s infinite ease-in-out;
   }
   @keyframes rotate 
   {
      0%   {  transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 
      50%  {  transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
      100% {  transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
   }
</style>
</head>
<body>
<div  class="container">
   <div class="shape"></div>
</div>    
</body>
</html>
View Code

      在瀏覽器中打開包含這段HTML代碼的html文件，能夠呈現出如圖18所示的Loading動畫效果。

 

圖18  Loading動畫效果（13）

      （3）兩個方形平移並旋轉變換。

      編寫以下的HTML文件。

<!DOCTYPE html>
<html>
<head>
<title>Loading加載動畫</title>
<style>
   .container
   {
      margin: 0 auto;
      width: 300px;
      height:300px;
      position: relative;
      display:flex;
      justify-content:center;
      align-items:center;
      background:#d8d8d8;
      border: 4px solid rgba(255, 0, 0, 0.9);
      border-radius: 10%;
   }
   .shape 
   {
      background-color: #ff8c00;
      width: 50px;
      height: 50px;
      position: absolute;
      animation: move 1.8s infinite ease-in-out;
   }
   .shape:nth-child(2) 
   {
      animation-delay: -0.9s;
   }
   @keyframes move 
   {
       25%  {  transform: translateX(52px) rotate(-90deg) scale(0.5);} 
       50%  {  transform: translateX(52px) translateY(52px) rotate(-179deg); } 
       50.1% { transform: translateX(52px) translateY(52px) rotate(-180deg);} 
       75%   { transform: translateX(0px) translateY(52px) rotate(-270deg) scale(0.5);} 
       100%  { transform: rotate(-360deg);}
   }
</style>
</head>
<body>
<div  class="container">
  <div class="shape"></div>
  <div class="shape"></div>
</div>    
</body>
</html>
View Code

      在瀏覽器中打開包含這段HTML代碼的html文件，能夠呈現出如圖19所示的Loading動畫效果。

 

圖19  Loading動畫效果（14）

      若在.shape的樣式定義中加上一句「border-radius: 50%;」，使得顯示的方形變成圓形，則呈現如圖20所示的動畫效果。

 

圖20  Loading動畫效果（15）

      （4）利用box-shadow屬性設置陰影圖形。

       一個方形經過在它的前面加陰影的方式能夠獲得兩個方形。

       例如，設頁面中有<span class="shape"></span>，定義.shape的樣式以下：

   .shape

   {

      width:40px;

      height:40px;

      background-color:#f00;

      box-shadow: -40px 0 0 #00f;

   }

      可在頁面中顯示如圖21所示的圖形，其中藍色的正方形是經過box-shadow設置陰影獲得的。

 

圖21  兩個正方形

      定義關鍵幀使得陰影方形的顏色和方形背景顏色進行切換，切換的顏色之一採用黑色全透明色。編寫HTML文件以下：

<!DOCTYPE html>
<html>
<head>
<title>Loading加載動畫</title>
<style>
   .container
   {
      margin: 0 auto;
      width: 300px;
      height:300px;
      position: relative;
      display:flex;
      justify-content:center;
      align-items:center;
      background:#d8d8d8;
      border: 4px solid rgba(255, 0, 0, 0.9);
      border-radius: 10%;
   }
   .shape
   {
      width:40px;
      height:40px;
      display: block;
      position:relative;
      background-color:#ff8c0000;
      top: 0;
      bottom: 40px;
      box-shadow: -40px 0 0 #ff8c00;
      animation: anim 1s linear infinite;
   }
   .shape:nth-child(2)
   {
      left:-40px;
      top: 40px;
      bottom: 0;
      animation-delay: .25s;
   }
   @keyframes anim 
   {
      0%, 100% 
      {
          box-shadow: -40px 0 0 transparent;
          background-color: #ff8c00;
      }
      50% 
      {
          box-shadow: -40px 0 0 #ff8c00;
          background-color: transparent;
      }
   }
</style>
</head>
<body>
<div  class="container">
    <span class="shape"></span>
    <span class="shape"></span>
</div>    
</body>
</html>
View Code

       在瀏覽器中打開包含這段HTML代碼的html文件，能夠呈現出如圖22所示的Loading動畫效果。

 

圖22  Loading動畫效果（16）

      若將上面代碼中.shape:nth-child(2)內的語句「left:-40px;」刪除，其他保持不變，則呈現出如圖23所示的Loading動畫效果。

 

圖23  Loading動畫效果（17）

      上面這個例子中經過box-shadow屬性設置獲得一個方形的思路是很是值得借鑑的。下面的這個例子採用box-shadow屬性進行設置實現就顯得簡單容易多了。

      設要實現的Loading動畫效果如圖24所示。

 

圖24  Loading動畫效果（18）

      這個動畫效果可描述爲：一個正方形從左上角的位置出發，沿着右上角、右下角、左下角、左上角四個位置順時針循環轉圈，在其通過的位置若是沒有正方形，則放置一個正方形；若是已有一個正方形，則移除該位置的正方形。

      仔細體會圖24的動畫過程，發現一共有12個不一樣的關鍵幀須要描述。能夠採用box-shadow屬性設置4個陰影正方形的方法來實現關鍵幀的描述。編寫以下的HTML文件。

<!DOCTYPE html>
<html>
<head>
<title>Loading加載動畫</title>
<style>
  .container
  {
    margin: 0 auto;
    width: 300px;
    height:300px;
    position: relative;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#d8d8d8;
    border: 4px solid rgba(255, 0, 0, 0.9);
    border-radius: 10%;
  }
  .shape
  {
    width:20px;
    height:20px;
    box-shadow: -40px -40px 0 20px #ff8c00, -40px -40px 0 20px #ff8c00,
                -40px -40px 0 20px #ff8c00, -40px -40px 0 20px #ff8c00;
    animation: anim 6s infinite;
  }
  @keyframes anim 
  {
    0%,100% 
    {
      box-shadow: -40px -40px 0 20px #ff8c00, -40px -40px 0 20px #ff8c00,
                  -40px -40px 0 20px #ff8c00, -40px -40px 0 20px #ff8c00;
    }
    8.33% 
    {
      box-shadow: -40px -40px 0 20px #ff8c00, 40px -40px 0 20px #ff8c00, 
                  40px -40px 0 20px #ff8c00, 40px -40px 0 20px #ff8c00;
    }
    16.66% 
    {
      box-shadow: -40px -40px 0 20px #ff8c00, 40px -40px 0 20px #ff8c00, 
                  40px 40px 0 20px #ff8c00, 40px 40px 0 20px #ff8c00;
    }
    24.99% 
    {
      box-shadow: -40px -40px 0 20px #ff8c00, 40px -40px 0 20px #ff8c00, 
                  40px 40px 0 20px #ff8c00, -40px 40px 0 20px #ff8c00;
    }
    33.32% 
    {
      box-shadow: -40px -40px 0 20px #ff8c00, 40px -40px 0 20px #ff8c00, 
                  40px 40px 0 20px #ff8c00, -40px -40px 0 20px #ff8c00;
    }
    41.65% 
    {
      box-shadow: 40px -40px 0 20px #ff8c00, 40px -40px 0 20px #ff8c00, 
                  40px 40px 0 20px #ff8c00, 40px -40px 0 20px #ff8c00;
    }
    49.98% 
    {
      box-shadow: 40px 40px 0 20px #ff8c00, 40px 40px 0 20px #ff8c00, 
                  40px 40px 0 20px #ff8c00, 40px 40px 0 20px #ff8c00;
    }
    58.31% 
    {
      box-shadow: -40px 40px 0 20px #ff8c00, -40px 40px 0 20px #ff8c00, 
                  40px 40px 0 20px #ff8c00, -40px 40px 0 20px #ff8c00;
    }
    66.64% 
    {
      box-shadow: -40px -40px 0 20px #ff8c00, -40px -40px 0 20px #ff8c00, 
                  40px 40px 0 20px #ff8c00, -40px 40px 0 20px #ff8c00;
    }
    74.97% 
    {
      box-shadow: -40px -40px 0 20px #ff8c00, 40px -40px 0 20px #ff8c00, 
                  40px 40px 0 20px #ff8c00, -40px 40px 0 20px #ff8c00;
    }
    83.3% 
    {
      box-shadow: -40px -40px 0 20px #ff8c00, 40px 40px 0 20px #ff8c00, 
                  40px 40px 0 20px #ff8c00, -40px 40px 0 20px #ff8c00;
    }
    91.63% 
    {
      box-shadow: -40px -40px 0 20px #ff8c00, -40px 40px 0 20px #ff8c00, 
                  -40px 40px 0 20px #ff8c00, -40px 40px 0 20px #ff8c00;
    }
  }
</style>
</head>
<body>
<div  class="container">
    <div class="shape"></div>
</div>    
</body>
</html>
View Code

      在瀏覽器中打開包含這段HTML代碼的html文件，能夠呈現出如圖24所示的Loading動畫效果。

      爲了加深你們對box-shadow屬性使用方法的理解，再看一個電池充電的例子。

      經過.shape屬性設置繪製出電池的形狀，電池充電電量的動畫關鍵幀採用簡單地設置box-shadow屬性來完成。編寫以下的HTML文件。

<!DOCTYPE html>
<html>
<head>
<title>Loading加載動畫</title>
<style>
  .container
  {
    margin: 0 auto;
    width: 300px;
    height:300px;
    position: relative;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#d8d8d8;
    border: 4px solid rgba(255, 0, 0, 0.9);
    border-radius: 10%;
  }
  .shape 
  {
    width:80px;
    height: 40px;
    border: 8px #b22222 solid;
    border-radius: 10%;
    position: relative;
    animation: anim 5s linear infinite;
  }
  .shape:after 
  {
    width: 5.6px;
    height: 100%;
    background-color: #b22222;
    border-radius: 0px 40px 40px 0px;
    position: absolute;
    content: "";
    top: 0;
    left: calc(100% + 8px);
  }
  @keyframes anim 
  {
     0%   { box-shadow: inset 0px 0px 0px #b22222;  }
     100% { box-shadow: inset 80px 0px 0px #b22222;  }
  }
</style>
</head>
<body>
<div  class="container">
    <div class="shape"></div>
</div>    
</body>
</html>
View Code

      在瀏覽器中打開包含這段HTML代碼的html文件，能夠呈現出如圖25所示的Loading動畫效果。

 

圖25  Loading動畫效果（19）

      （5）條形旋轉。

      能夠使條形旋轉起來，實現相似時鐘指針旋轉的效果。編寫以下的HTML文件。

<!DOCTYPE html>
<html>
<head>
<title>Loading加載動畫</title>
<style>
  .container
  {
    margin: 0 auto;
    width: 300px;
    height:300px;
    position: relative;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#d8d8d8;
    border: 4px solid rgba(255, 0, 0, 0.9);
    border-radius: 10%;
  }
  .shape
  {
    position: absolute;
    left:150px;
    height:20px;
    width:100px;
    background:#ff8c00;
    transform-origin: left center; 
    animation: anim 2s linear infinite;
  }
  .shape:nth-child(2) 
  {    
    width:80px;
    animation: anim 8s linear infinite;
  }
  @keyframes anim
  {
      0% { transform: rotate(0deg);  }
      100% { transform: rotate(360deg); }
  }
</style>
</head>
<body>
<div  class="container">
    <div class="shape"></div>
    <div class="shape"></div>
</div>    
</body>
</html>
View Code

      在瀏覽器中打開包含這段HTML代碼的html文件，能夠呈現出如圖26所示的Loading動畫效果。

 

圖26  Loading動畫效果（20）

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程