css3实现loading动画

css3提供了几个基本的动画属性trasform,transition,animation。但想要写出很棒棒的动画效果必须能不断地学习呦。。css3的动画功能十分的好用,例如我们可以用其写出一个简单的loading效果。

如图,一个琴谱版的loading:

第一步,画出静态琴谱,很简单无非是一个外层div,内嵌几个并排的div

QQ图片20171012181342.png

.spinner {
  height: 40px;
}
.spinner > div {
  background-color: #333;
  height: 100%;
  width: 6px;
  display: inline-block;
}

<div class="spinner">
  <div></div>
  … //你可以根据需求多加几个div
  <div></div>
</div>

第二步,让琴谱动起来

QQ图片20171012181540.png

.spinner > div {
  animation: loading 1.2s infinite ease-in-out;
}
@keyframes loading {
  0%, 40%, 100% { transform: scaleY(0.4); }  
  20% { transform: scaleY(1.0); }
}

在上面的例子中使用了scaleY实现了div的纵向放大。

最后一步,设置延时,让每个琴键的拉伸过程不同:

QQ图片20171012182115.png

.spinner .rect2 {  animation-delay: -1.1s; }
.spinner .rect3 { animation-delay: -1.0s; }
.spinner .rect4 { animation-delay: -0.9s; }
.spinner .rect5 { animation-delay: -0.8s; }

<div class="spinner">
  <div class="rect1"></div>
  … //为节省篇幅省略中间代码
  <div class="rect5"></div>
</div>

其他的loading大同小异。css3的动画还可以做出很多更加酷炫的效果,大家要加油油哦!!

2017-10-12

0 个评论