Libx

20个loading动画继续更新

Word count: 687Reading time: 3 min
2017/04/13 Share

继续更新

此处添加图片

这是个漏斗的加载动画,在初看到这个效果时我认为是用一些手段实现连贯的效果,但是看了源码后发现他的处理方式非常的巧妙,所以这里来实现一下。

动画并非是一直旋转并且top流下,bottom充满。
等到top转到下部执行bottom的动画,bottom。。。
而是在整个rotatehoder的动画前90%不动,后10%转动180,之后迅速归回原位
在视觉上形成连贯的视觉效果。

大致可以分析得到,主题的内容是由上下·两个部分来组成,中间利用伪元素来将两端连接起来即是中间的颈。在外层用一个div来控制整体的转动,然后分别用top和bottom伪类的动画来控制sand的“流动”。

在这个动画中主要用到的是animation和before,after,伪元素来实现的sandwatch中的sand。

首先markup:

<div class="center"></div>
<div class="sandwatch-holder">
<div class="sandwatch-top">&lt;/div>
<div class="sandwatch-bottom">&lt;/div>
</div>
Loading...
</div>

基本结构就是这样。现在把主体部分的布局给定一下。
.center {
margin: 30px auto 0;
width: 200px;
}
.sandwatch-holder {
position: relative;
width: 43px;
animation: rotateHolder 2s linear infinite;/*主体部分的动画*/
}
主体部分动画:
@keyframes rotateHolder {
0% {
transform: rotate(0deg);
}
90% {
transform: rotate(0deg);
}
/*前面90%均是不动的,sand在落下后,10%转动*/
100% {
transform: rotate(180deg);
}
}
在sandwatchhoder上添加伪类,将上下两部分连接。
/*上部分下部分之间内的蓝线*/
.sandwatch-holder:after {
content: "";
position: absolute;
width: 2px;
height: 50px;
background: #1bb5e5;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
margin: -17px 0 0;
animation: moveStream 2s linear infinite;
}
然后将top部分和bottom部分来定义一下
/*上下部部分*/
.sandwatch-top, .sandwatch-bottom {
width: 35px;
height: 35px;
position: relative;
border: 6px solid #a56818;
border-right: 2px solid #a56818;
border-top: 2px solid #a56818;
border-radius: 50px 100px 50px 30px;/*画出来上下部分的边界*/
overflow: hidden;
}
.sandwatch-top {
transform: rotate(-45deg);
}
.sandwatch-bottom {
transform: rotate(135deg);
margin: 12px 0 0;
}
将上下部分用伪类来连接起来,直接after加到sandwatch-hoder上面,然后绝对定位过去。
/*连接上下两部分的,处于中部,填补bottom的上外边距*/
.sandwatch-holder:before {
position: absolute;
content: "";
width: 8px;
height: 12px;
background: #a56818;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
然后就是sand啦:
/*蓝色液体 */
.sandwatch-top:before, .sandwatch-bottom:before {
content: "";
position: absolute;
width:100%;
height: 100%;
background: #1bb5e5;
border-radius: 0 100px 0 0;
}
/*top液体只能减少 不能增加*/
.sandwatch-top:before {
transform: translate(0, 0);
animation: dropSand 2s linear infinite;
}
/*bottom液体只能增加 不能减少*/
.sandwatch-bottom:before {
transform: translate(25px, -25px);
border-radius: 0 0 0 12px;
animation: fillSand 2s linear infinite;
}
把动画给写一下

```css
@keyframes dropSand {
100% {
transform: translate(-22px, 22px);
}
}

@keyframes fillSand {
  4% {
    transform: translate(25px, -25px);
  }

  100% {
    transform: translate(-1px, 0);
  }
}

@keyframes moveStream {
  10% {
    margin: 17px 0 0;
  }

  100% {
    margin: 17px 0 0;
  }
}

动画即是移动sand。。。

done,去上课。

CATALOG
  1. 1. 继续更新