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

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

3．小圓型Loading

      這類Loading動畫的基本思想是：在呈現容器中定義1個或多個子層，再對每一個子層進行樣式定義，使得其均顯示爲一個實心圓形，最後編寫關鍵幀動畫控制，使得各個實心圓或者大小發生改變、或者平移、或者旋轉。html

       （1）小圓大小或透明度進行變化。瀏覽器

       例如，在container層中定義兩個名爲shape的子層，經過對.shape的樣式定義使得兩個子層均顯示一個實心圓，定義關鍵幀控制兩個圓的大小進行交替縮放，造成兩個圓的切換效果。編寫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: 80px;
     height: 80px;
     border-radius: 50%;
     background-color: #0000ff;
     opacity: 0.6;
     position:  absolute;
     animation: anim 2.0s infinite ease-in-out;
   }
   .shape:nth-child(2) 
   {
      animation-delay: -1.0s;
   }
   @keyframes anim 
   {
      0%,100% { transform: scale(0.0);}
      50%     { transform: scale(1.0); }
   }
</style>
</head>
<body>
<div  class="container">
  <div class="shape"></div>
  <div class="shape"></div>
</div>
</div>    
</body>
</html>
View Code

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

 

圖27  Loading動畫效果（21）動畫

      若改寫.shape:nth-child(2)的定義以下，使得兩個圓的初始位置不一樣，其餘部分保持不變spa

   .shape:nth-child(2) 3d

   {調試

     top: auto;code

     bottom: 10px;orm

     animation-delay: -1.0s;

   }

則呈現程序如圖28所示的動畫效果。

 

圖28  Loading動畫效果（22） 

      又例如，在container層中定義三個名爲shape的子層，經過對.shape的樣式定義使得三個子層顯示爲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 
  {
     width: 30px;
     height: 30px;
     background-color: #228b22;
     border-radius: 100%;
     display: inline-block;
     margin-left: 10px;     
     animation: anim 1.4s infinite ease-in-out;
     animation-fill-mode: both;
   }
   .shape:nth-child(1)  
   { 
     animation-delay: -0.32s;
   }
   .shape:nth-child(2)  
   {
     animation-delay: -0.16s;
   }
   @keyframes anim 
   {
      0%, 80%, 100% { transform: scale(0.0); }
      40% { transform: scale(1.0); }
   }
</style>
</head>
<body>
<div  class="container">
  <div class="shape"></div>
  <div class="shape"></div>
  <div class="shape"></div>
</div>    
</body>
</html>
View Code

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

 

圖29  Loading動畫效果（23）

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

   @keyframes anim

   {

      0%, 80%, 100% { transform: scale(0.2);  opacity: 0.2;}

      40% { transform: scale(1.0);  opacity: 1; }

    }

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

 

圖30  Loading動畫效果（24）

      （2）小圓的位置發生變化。

      例如，讓一個小圓在一條水平窄木條上進行移動，編寫以下的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%;
   }
   .loader
   {    
      width: 200px; 
      height: 8px; 
      border-radius: 2px; 
      position: relative; 
      background: red; 
      animation: changeBgColor 1s ease-in infinite alternate; 
   } 
   .loader>span
   { 
      display: inline-block; 
      width: 24px; 
      height: 24px; 
      border-radius: 50%; 
      background: red; 
      position: absolute; 
      margin-top: -8px; 
      margin-left:-12px; 
      animation: changePosition 1s ease-in infinite alternate; 
   } 
   @keyframes changeBgColor
   { 
       0%   { background: red;  } 
       100% { background: lightblue;   } 
   } 
   @keyframes changePosition
   { 
       0%   { background: red; } 
       100% { margin-left: 188px;  background: lightblue; } 
   }
</style>
</head>
<body>
<div  class="container">
   <div class="loader">   
       <span></span>   
   </div>   
</div>    
</body>
</html>
View Code

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

 

圖31  Loading動畫效果（25）

      又例如，有藍、黃、綠三個實心圓，讓居中的黃圓不動，藍圓和綠圓進行平移變換。編寫以下的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%;
   }
  .ball 
  {
     position: absolute;
     width: 30px;
     height: 30px;
     border-radius: 50%;
  }
  .container .yellow 
  {
     background-color: #f5e82f;
  }
  .container .blue 
  {
     background-color: #4cb8f5;
     animation: animateBlue 1.8s infinite;
   }
   .container .green 
   {
     background-color: #a6e630;
     animation: animateGreen 1.8s infinite;
   }
   @keyframes animateGreen 
   {
      0%,100% { transform: translate(-40px, 0px); }
      50%     { transform: translate(40px, 0px);  }
   }
   @keyframes animateBlue 
   {
      0%,100%  { transform: translate(40px, 0); }
      50%      { transform: translate(-40px, 0px);  }
   }
}
</style>
</head>
<body>
<div  class="container">
   <div class="ball blue"></div>
   <div class="ball yellow"></div>
   <div class="ball green"></div>
</div>    
</body>
</html>
View Code

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

 

圖32  Loading動畫效果（26）

      再例如，讓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%;
   }
   .loading
   {    
      width: 200px;    
      height: 15px;    
      position: relative;    
   }    
   .loading span
   {    
      position: absolute;    
      width: 15px;    
      height: 100%;    
      border-radius: 50%;    
      background: #ff8c00;    
      animation: load 1.04s ease-in infinite alternate;    
   }    
   @keyframes load
   {    
       0%   {  opacity: 1;   transform: translate(0px);  }
       100% {  opacity: 0.2;  transform: translate(200px); }    
   }    
   .loading span:nth-child(1)
   {    
       animation-delay:0.13s;    
   }    
   .loading span:nth-child(2)
   {    
       animation-delay:0.26s;    
   }    
   .loading span:nth-child(3)
   {    
       animation-delay:0.39s;    
   }    
   .loading span:nth-child(4)
   {    
       animation-delay:0.52s;    
   }    
   .loading span:nth-child(5)
   {    
       animation-delay:0.65s;    
   }
</style>
</head>
<body>
<div  class="container">
  <div class="loading">
    <span></span><span></span><span></span>
    <span></span><span></span>
  </div> 
</div>    
</body>
</html>
View Code

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

 

圖33  Loading動畫效果（27）

      若改寫上面文件中.loading span和關鍵幀的定義以下，其他部分保持不變

   .loading span

   {   

      width: 15px;   

      height: 100%;   

      display: inline-block;   

      margin-right: 15px;   

      background: #ff8c00;   

      animation: load 1.04s ease infinite;   

   }   

   @keyframes load

   {   

      0%   { opacity: 1;   transform: rotate(0deg); }   

      100% { opacity: 0;  transform: rotate(90deg);  }   

   } 

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

 

圖34  Loading動畫效果（28）

     還例如，讓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: 40px;
       height: 40px;
       border-radius:50%;  
       border:0;
       position:absolute;
       background-color: #00ff00;  
       animation: spin 2s infinite ease;
   }
   .shape:first-child
   {
      background:#ff8c00;
      animation-delay:-1.5s;
   }
   .shape:nth-child(2)
   {
      background:#20b2aa;
      animation-delay:-1s;
   }
   .shape:nth-child(3)
   {
      background:#32cd32;
      animation-delay:-0.5s;
   }
   .shape:last-child
   {
      background:#da70d6;
   }
   @keyframes spin
   {
      0%,100%  { transform:translate(-60px,0);}
      25%      { transform:translate(0,-60px);}
      50%      { transform:translate(60px,0); }
      75%      { transform:translate(0,60px);   }
   }
</style>
</head>
<body>
<div  class="container">
    <div class="shape"></div>
    <div class="shape"></div>
    <div class="shape"></div>
    <div class="shape"></div>
</div>    
</body>
</html>
View Code

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

 

圖35  Loading動畫效果（29）

     在這個例子的基礎上，咱們再複雜一點點，搞大中小三種類型各4種顏色的12個圓進行位置變換。編寫以下的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%; 
   }
   .group 
   {
       width: 64px;
       height: 24px;
       position: absolute; 
   }
   .group:nth-child(2) 
   {
       transform: rotate(90deg);
   }
   .group:nth-child(3) 
   {
       transform: rotate(180deg);
   }
   .group:nth-child(4) 
   {
       transform: rotate(270deg);
   }
   .shape 
   {
       top: 50%;
       left: 50%;
       border-radius:50%; 
       animation: move 2.5s infinite;
       position: absolute;
   }
   .shape:nth-child(1) 
   {
       width: 8px;
       height: 8px;
       margin-top:-4px;
       margin-left:-4px;
       animation-delay: -0.3s;
   }
   .shape:nth-child(2) 
   {
       width: 16px;
       height: 16px;
       margin-top:-8px;
       margin-left:--8px;
       animation-delay: -0.6s;
   }
   .shape:nth-child(3) 
   {
       width: 24px;
       height: 24px;
       margin-top:-12px;
       margin-left:-12px;
       animation-delay: -0.9s;
   }
   .blue 
   {
       background-color: #00f;
   }
   .red 
   {
       background-color: #f00;
   }
   .yellow 
   {
       background-color: #ff0;
   }
   .green 
   {
      background-color: #0f0;
   }
   @keyframes move 
   {
      0%   { transform: translateX(0); }
      25%  { transform: translateX(-64px); }
      75%  { transform: translateX(32px); } 
      100% {transform: translateX(0); }
   }
</style>
</head>
<body>
<div  class="container">
   <div class="group">
      <div class="shape blue"></div>
      <div class="shape blue"></div>
      <div class="shape blue"></div>
   </div>
   <div class="group">
      <div class="shape yellow"></div>
      <div class="shape yellow"></div>
      <div class="shape yellow"></div>
   </div>
   <div class="group">
      <div class="shape red"></div>
      <div class="shape red"></div>
      <div class="shape red"></div>
   </div>
   <div class="group">
      <div class="shape green"></div>
      <div class="shape green"></div>
      <div class="shape green"></div>
   </div>
</div>    
</body>
</html>
View Code

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

 

圖36  Loading動畫效果（30）

      在調試時，刪除.shape定義中的「top: 50%;」和「left: 50%;」兩句設置，則呈現出如圖37所示的動畫效果，也挺有趣的。

 

圖37  Loading動畫效果（31）

      若再繼續刪除.shape:nth-child(1)、.shape:nth-child(2)和.shape:nth-child(3)定義中有關margin-top和margin-left屬性設置的相關6個語句，則則呈現出如圖38所示的動畫效果。

 

圖38  Loading動畫效果（32）

      （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%;
   }
   .loader
   {
      width:100px;
      height:100px;
      border-radius:50%;
      border:2px solid #f3f3f3;
      animation:load 2s linear infinite;
   }
   .loader:before 
   {
      content: '';
      display: block;
      width: 0;
      height: 0;
      position: absolute;
      top: -8px;
      left: 50%;
      border: 8px solid #f3f3f3;
      border-radius: 50%;
   }
   @keyframes load
   {
      0%   { transform: rotate(0deg); }
      100% { transform:rotate(360deg); }
   }
</style>
</head>
<body>
<div  class="container">
  <div class='loader'></div>
</div>    
</body>
</html>
View Code

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

 

圖39  Loading動畫效果（33）

       多個圓圍成一個圓周進行旋轉，怎麼實現呢？

       最簡單地在圓周上分佈多個小圓的實現方法是將border的border-style屬性值設置爲「dotted」點狀邊框，這樣圓周邊框上會分佈一些小圓，讓它們旋轉起來。編寫以下的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%;
   }
   .loader
   {
      width:100px;
      height:100px;
      border-radius:50%;
      border:16px dotted #f3f3f3;
      animation:load 2s linear infinite;
   }
   @keyframes load
   {
      0%   { transform: rotate(0deg); }
      100% { transform:rotate(360deg); }
   }
</style>
</head>
<body>
<div  class="container">
  <div class='loader'></div>
</div>    
</body>
</html>
View Code

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

 

圖40  Loading動畫效果（34）

      可是這種方法獲得的小圓是一個總體（由於只用一個div的邊框獲得），沒法對其中某個小圓進行單獨控制。爲此，大多數狀況下須要創建多個子層從而獲得多個小圓。此時，須要合理地安排小圓的位置，使得它們看起來排列成圓周。

      例如安排4個小圓在一個正方形A的四個頂點位置，另外安排4個小圓在正方形A繞中心旋轉45°後的4個頂點位置，那麼這8個小圓必定會排列成一個圓周。再對它們進行動畫效果設置。編寫以下的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%;
   }
   .loading
   {
      width: 100px;
      height: 100px;
      position: absolute;
   }
   .loading>span
   {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #ff8c00;
      position: absolute;
      animation: anim 1.5s linear infinite;
   }
   .loading>span:nth-child(1)
   {
      top: 0;
      left: 0;
   }
   .loading>span:nth-child(2)
   {
      top: 0;
      right: 0;
   }
   .loading>span:nth-child(3)
   {
      right: 0;
      bottom: 0;
   }
   .loading>span:nth-child(4)
   {
      bottom: 0;
      left: 0;
   }
   .loading:nth-of-type(2)
   {
      transform: rotate(45deg);
   }
   @keyframes anim
   {
      0%   { transform: scale(0); }
      50%  { transform: scale(1); }
      100% { transform: scale(0); }
   }
   .loading:nth-of-type(1) span:nth-of-type(1)
   {
       animation-delay: -0.1s;
   }
   .loading:nth-of-type(2) span:nth-of-type(1)
   {
       animation-delay: -0.3s;
   }
   .loading:nth-of-type(1) span:nth-of-type(2)
   {
       animation-delay: -0.5s;
   }
   .loading:nth-of-type(2) span:nth-of-type(2)
   {
       animation-delay: -0.7s;
   }
   .loading:nth-of-type(1) span:nth-of-type(3)
   {
       animation-delay: -0.9s;
   }
   .loading:nth-of-type(2) span:nth-of-type(3)
   {
       animation-delay: -1.1s;
   }
   .loading:nth-of-type(1) span:nth-of-type(4)
   {
       animation-delay: -1.3s;
   }
   .loading:nth-of-type(2) span:nth-of-type(4)
   {
       animation-delay: -1.5s;
   }
</style>
</head>
<body>
<div  class="container">
  <div class="loading">   
     <span></span><span></span>
     <span></span><span></span>
  </div>
  <div class="loading">
     <span></span><span></span>
     <span></span><span></span>
  </div>
</div>
</body>
</html>
View Code

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

 

圖41  Loading動畫效果（35）

若將上面HTML代碼中的關鍵幀定義改寫爲：

   @keyframes anim

   {

      0%, 100% {  opacity: 0.0;}

      50% {  opacity: 1; }

   }

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

 

圖42  Loading動畫效果（36）

若將上面HTML代碼中的關鍵幀定義改寫爲：

   @keyframes anim

   {

      0%, 80%,100% {  opacity: 0.0;}

      40% {  opacity: 1; }   }

則呈現出如圖43所示的動畫效果，此時圓周上好像只有6個小圓在旋轉。

 

圖43  Loading動畫效果（37）

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

      一樣能夠經過對box-shadow屬性進行設置，使得設定的陰影圖形顯示成小圓，而且將多個小圓（陰影造成的）圍成一個圓周。

例如，設頁面中有<div class='loader'></div>，定義.loader的樣式定義爲：

.loader

{  

   width:160px;

   height:160px;

   border-radius: 50%;

   box-shadow: inset 0 0 0 16px  #fff,

              -80px -80px 0 -64px #f00,

              0 -112px 0 -64px #f0f,

              80px -80px 0 -64px #ff0,

              -80px 80px 0 -64px #0f0,

              0 112px 0 -64px #0ff,

              80px 80px 0 -64px #00f,

              -112px 0 0 -64px #808,

              112px 0 0 -64px #000;  

}

      可在頁面中顯示如圖44的圖案，這個圖案中的9個圓對應box-shadow屬性值設定的9個分項。

圖44  box-shadow屬性設置的9個圓

      定義關鍵幀，讓這9個圓旋轉起來，編寫以下的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%;
   }
   .loader
   {   
      width:160px;
      height:160px;
      border-radius: 50%;
      box-shadow: inset 0 0 0 16px  #fff, 
                  -80px -80px 0 -64px #f00, 
                  0 -112px 0 -64px #f0f, 
                  80px -80px 0 -64px #ff0, 
                  -80px 80px 0 -64px #0f0, 
                  0 112px 0 -64px #0ff, 
                  80px 80px 0 -64px #00f,
                  -112px 0 0 -64px #808,
                  112px 0 0 -64px #000;
       animation: load 3s linear infinite;
   }
   @keyframes load
   {
      0%   { transform: rotate(0deg); }
      100% { transform:rotate(360deg); }
   }
</style>
</head>
<body>
<div  class="container">
  <div class='loader'></div>
</div>    
</body>
</html>
View Code

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

 

圖45  Loading動畫效果（38）

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