乐趣区

关于css:一些有趣的css动画

jiezi

* 前言

工夫过得也太快了吧，上一次更新文章曾经是一年前了。最近三次元生存挺忙的，此刻忙里偷闲，来写写文章。近期大屏写的比拟多，其中有挺多乏味的 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>

  1. * 雷达扫描图

    在线代码

分为两局部，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 动画了。记录结束，期待下次再见。

退出移动版