一些有趣的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。第三段累加，类推。

// 关键代码
<template>
  <div class="wrapper">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <slot></slot>
  </div>
</template>

<style lang="scss" scoped>
.wrapper span {
  position: absolute;
  display: block;
}

.wrapper span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  animation: btn-anim1 4s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

.wrapper span:nth-child(2) {
  ...
  animation: btn-anim2 4s linear infinite;
  animation-delay: 1s;
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}

.wrapper span:nth-child(3) {
  ...
  animation: btn-anim3 4s linear infinite;
  animation-delay: 2s;
}
</style>

3. 星空图

在线代码

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

<template>
  <div id="app">
    <div id="stars"></div>
  </div>
</template>

<style lang="scss" scoped>
@function multiple-box-shadow($n) {
  $value: '#{random(2000)}px #{random(2000)}px #A1F5FF';
  @for $i from 2 through $n {
    $value: '#{$value} , #{random(2000)}px #{random(2000)}px #A1F5FF';
  }
  @return unquote($value);
}

$shadows-small: multiple-box-shadow(500);

#stars {
    position: relative;
    width: 1px;
    height: 1px;
    background: transparent;
    box-shadow: $shadows-small;
    animation: animStar 60s linear infinite;

    &:after {
      content: ' ';
      position: absolute;
      top: 2000px;
      width: 1px;
      height: 1px;
      background: transparent;
      box-shadow: $shadows-small;
    }
  }
@keyframes animStar {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-2000px);
  }
}
</style>

4. 类条形码扫描

在线地址

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

<template>
  <div id="rectangle"></div>
</template>

<style>
#rectangle {
  position: relative;
  width: 80px;
  height: 100px;
  background-image: linear-gradient(
    to left,
    rgba(0, 220, 255, 0.6) 0%,
    transparent 100%
  );
  border-right: 1px solid rgba(0, 220, 255, 1);
  animation: scan 6s linear infinite;
}

@keyframes scan {
  0% {
    left: 0%;
  }
  100% {
    left: 100%;
  }
}
</style>

5. * 雷达扫描图

   在线代码
   

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

<template>
  <div class="panel" ref="panel">
    <div class="scanner"></div>
  </div>
</template>

<style lang="scss" scoped>
.panel {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid rgba(0, 220, 255, 0.4); // 绘制最外层的圈
  background: radial-gradient( // 通过颜色渐变绘制内圈
    circle,
    transparent 50px,
    rgba(0, 220, 255, 1) 51px,
    transparent 52px,
    transparent 101px,
    rgba(0, 220, 255, 0.5) 102px,
    transparent 103px
  );

  .scanner {
    animation: scanning 6s infinite linear;
    background-image: linear-gradient( // 着色区域为三角形
      to top right,
      rgba(0, 220, 255, 1) 0%,
      transparent 50%
    );
    transform-origin: top left;
    position: absolute; // 让scanner定位在panel的圆心
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    border-left: 1px solid rgba(0, 220, 255, 1);
  }

  &:before { // 绘制水平线
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: rgba(0, 220, 255, 0.5);
  }

  &:after { // 绘制垂直线
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: rgba(0, 220, 255, 0.5);
  }
}

@keyframes scanning {
  100% {
    transform: (rotate(360deg));
  }
}
</style>

* 结语

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