一些有趣的css动画

* 前言

时间过得也太快了吧，上一次更新文章已经是一年前了。最近三次元生活挺忙的，此刻忙里偷闲，来写写文章。近期大屏写的比较多，其中有挺多有趣的css动画，那么就来记录一下吧。

* 正文

1. 抽屉效果淡入

在线代码

运用到clip-path对视图进行裁剪。clip-path多应用于绘制不规则图形。

@keyframes clip-enter {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

2. 流动的边框

在线代码

通过四个绝对定位的span当做边框。例如第一个span标签，就绝对定位在上方，当成上边框，设置left：-100%,让它从左边开始出发。设置animation，更改它的left。注意，这里的动画，50%的时候就应该把left设置到100%，也就是让它走完从左到右的路径。剩下的三个span标签以此类推。
这里需要注意的是如何让这四个animation无缝连接。我们需要设置每段动画的开始时间(animation-delay)。第一段动画为0，马上播放。第二个动画应该开始时间应该是第一段动画总时间/4。第三段累加，类推。

// 关键代码

3. 星空图

在线代码

这个的核心代码就是通过css函数multiple-box-shadow动态设置box-shadow,通过box-shadow来绘制星星。

4. 类条形码扫描

在线地址

这个算是下面雷达扫描图的超简易版，绘制一个渐变色的长方形，通过animation改变它的位置达到扫描的效果。

5. * 雷达扫描图

   在线代码
   

分为两部分，panel绘制雷达图，scan负责绘制扫描区域。

* 结语

以上就是一些有趣的css动画了。记录完毕，期待下次再见。