前言

一个用于过渡的加载组件,效果图:

image

技术栈

• vue
• css,html

实现思路

1.沙漏主体设计

image

<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模块下,演示文档

image

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

具体源码

image
Github:点这里

觉得有用的话,欢迎Star, 感谢🙏