Libx

20个loading小动画//二

字数统计: 765阅读时长: 4 min
2017/04/01 Share

20个loading动画

先说一点题外话吧,,最近好几天都没有在写博客/虽然我还是一直在学习css,嗯。/主要原因是什么呢?因为前几天我发现我暗恋的一个小女生有男朋友啦哈哈哈哈,绝望吧,就看着她跟她男票走那么近,然后我迎面走过,脸上应该还是一副很潇洒的样子吧。哈哈哈,心酸不。总之最近心情都不是很好,但是没人说啊,唉,我可能真的需要一个女朋友啦。突然都想把这篇文设为私密了,但是一想也没几个人看,那就不设了吧。

嗯,我们来继续谈技术。

3:原作者@Ben Sinca 来自codepen https://codepen.io/arcticben/pen/yMomZg

效果图懒得做了,想看的话就到原文看一看吧。

分析一下效果:背景使用了渐变色,很漂亮的绿,嗯。主体就是一个定宽定高的大盒子,里面有三根线,上下两根上下移动,还有一根沿着长方形滑动的短线,短线穿过三根长线之间的空隙,当短线穿过,空隙变大,短线的长度在运动时长短发生变化。右上角有一个大圆和一个小圆,小圆围着大圆转。

首先markup,

<div class="nav"></div>
<div class="line top">&lt;/div>
<div class="line middle">&lt;/div>
<div class="line bottom">&lt;/div>
<div class="run">&lt;/div>
<div class="circle">&lt;/div>/*小圆将使用after*/
</div>

来将大概的背景定一下;

html, body {
width: 100%;
height: 100%;
margin: 0;
}
body {
background: #50C9C3;
background: linear-gradient(to left, #50C9C3, #96DEDA);
}

主体部分的布局:

.nav {
height: 100px;
width: 90px;
position: absolute;
margin: 0 auto;
right: 0;
left: 0;
top: 45%;
cursor: pointer;
}
.nav .line{
position: relative;/*尽量不要使用absolute,在这里relative更灵活*/
width: 100%;
height: 3px;
background-color:#fff;
margin: 20px auto;
}
.nav .top{
top: 0;
animation:toprun 3s infinite;
animation-timing-function: cubic-bezier(0.51, 0.55, 0.27, 0.7);
}
.nav .bottom{
bottom:0;
animation: botrun 3s infinite;
animation-timing-function: cubic-bezier(0.51, 0.55, 0.27, 0.7);
}
.nav .circle{
position: absolute;
right:-30px;
top: -38px;
height: 30px;
width: 30px;
border-radius:100%;
border: 2px dotted #fff;
animation: circlerun 3s ease-in infinite;
}
.circle::after{
position: absolute;
content: '';
width: 10px;
height: 10px;
border: 2px dotted #fff;
border-radius:100%;
top:-10px;
right: -10px;
}
.nav .run{
position: absolute;
width: 23px;
height: 2px;
background-color:#fff;
top: 30px;
left: -10px;
animation: run 3s ease-in infinite;
animation-timing-function: cubic-bezier(0.51, 0.55, 0.27, 0.7);
}

现在可以看到页面已将完成了,然后就是动画了:/*动画已在上面写过,所以直接来定义:
/*顶部线的运动*/
@keyframes toprun {
0%{
top: -10px;
}
50%{
top:10px;
}
100%{
top: -10px;
}
}
/*底部线的运动*/
}@keyframes botrun {
0%{
top: -10px;
}
50%{
top:10px;
}
100%{
top: -10px;
}
}
@keyframes circlerun{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
.nav .run{
position: absolute;
width: 23px;
height: 2px;
background-color:#fff;
top: 30px;
left: -10px;
animation: run 3s ease-in infinite;
animation-timing-function: cubic-bezier(0.51, 0.55, 0.27, 0.7);
}
/*圆圈的运动,注意这个动画是直接在circle上面定义的而非他的after*/
@keyframes run{
0% {
left: -30px;
opacity: 1;
}
30% {
left: 100px;
top: 32px;
opacity: 1;
}
50% {
top: 60px;
left: 100px;
}
60% {
top: 60px;
left: 100px;
}
70% {
left: -30px;
opacity: 1;
top: 60px;
}
100% {
left: -30px;
opacity: 1;
top: 32px;
}
}

嗯就做完了,,,

2017/4/1/14:31

CATALOG
  1. 1. 20个loading动画
  • 嗯就做完了,,,