前言
一个用于过渡的加载组件,效果图:
技术栈
vue
css,html
实现思路
1.沙漏主体设计
如上图分为三个部分:上板、下板、中部; 中部又分为上半沙漏和下半沙漏,
我以上半沙漏为例:
.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个动画:
上沙漏减少
、下沙漏增加
、下落的沙子
、沙漏的旋转
原理和上面的上沙漏
基本相同
沙子的增加或减少: 通过动画控制子元素的高度体现增加和减少
比较关键的是: 控制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
使用
具体源码
Github:点这里
觉得有用的话,欢迎
Star
, 感谢