前言

一個用於過渡的載入元件,效果圖:

技術棧

• vue
• css,html

實現思路

1.沙漏主體設計

<template>
  <div class="hour-container" >
     <div class="upper-tap"></div>
     <div class="middle-tap">
       <div class="upper-half-container">
         <div class="upper-half-content">
           <div class="upper-sand" >
             <div class="sand-reduce"></div>
           </div>
         </div>
       </div>
       <div class="lower-half-container">
         <div class="lower-half-content">
            <div class="lower-sand">
             <div class="sand-add"></div>
           </div>
         </div>
       </div>
     </div>
     <div class="sand-falling">
       <div class="sand-null"></div>
     </div>
     <div class="bottom-tap"></div>
  </div>
</template>
複製程式碼

如上圖分為三個部分:上板、下板、中部; 中部又分為上半沙漏和下半沙漏, 我以上半沙漏為例:

<div class="upper-half-container">
    <div class="upper-half-content">
       <div class="upper-sand" >
         <div class="sand-reduce"></div>
       </div>
    </div>
</div>
複製程式碼

.upper-half-container{ /*上下沙漏各佔一半,overflow: hidden*/
    width: 100%;
    height: 50%;
    overflow: hidden;
    position: relative;
  }
.upper-half-content{ /*通過border-radius,width,height形成橢圓,加上border*/
    position: absolute;
    border: 3px solid rgb(248, 248, 250);
    border-radius: 50%;
    height: 105px;
    width: 50px;
    top: -53px;
    left: 2px;
    box-shadow: 2px 1px 3px 0px #aaa;
  }
.upper-sand{  /*裡面的沙子,overflow: hidden*/
    width: 100%;
    height: 100%;
    background-color: #409EFF;
    position: absolute;
    border-radius: 50%;
    top: 0px;
    overflow: hidden;
  }
.sand-reduce{ /*通過動畫控制height,來體現沙子減少*/
    height: 60%;
    width: 100%;
    background-color: #fff;
    animation: sand-reduce 4s linear infinite;
  }
  @keyframes sand-reduce{  /*動畫*/
   0%{
     height: 65%;
   }
   25%{
     height: 78%;
   }
   40%{
     height: 89%;
   }
   62.5%{
     height: 100%;
   }
   80%{
     height: 100%;
   }
   100%{
     height: 100%;
   }
 }
複製程式碼

2.動畫效果

主要有4個動畫: 上沙漏減少、下沙漏增加、下落的沙子、沙漏的旋轉

原理和上面的上沙漏基本相同

<div class='parent'>
    <div class='child'></div>
</div>
複製程式碼

沙子的增加或減少: 通過動畫控制子元素的高度體現增加和減少

比較關鍵的是: 控制4個動畫的銜接

我定了一個動畫的週期為4s:

• 上沙漏減少在0s~2.5s減少, 2.5~4s不變
• 下沙漏增加在0s~0.5s不變, 0.5~3s增加, 3s~4s不變
• 下落的沙子在0s~0.5s增加, 0.5~2.5s不變, 2.5s~3s減少, 3s~4s不變
• 沙漏的旋轉在0s~3s不變, 3~4s 旋轉

說明

該元件基於vue, 收錄在我的jk -ui庫的Loading模組下,演示文件

你也可以通過npm run --save jk-ui
<j-hour></j-hour>使用

具體原始碼

Github:點這裡

覺得有用的話,歡迎Star, 感謝?