VUE / CSS 动画之- 雷达图 / radar loading

HTML动画常见的有 gif,svg,css,js。
那VUE 除了原生weex外其它的小程序也都是HTML,所以css通用
这里直接用css 做个vue 雷达动画

原始效果如下,实际效果可调整.

上代码 (radar.vue):
 

<style>
.radar-container {
  display: flex;;
  justify-content: center;
  justify-items: center;
  align-items: center;
  place-items: center;
  background: #000000;
  width: 30vw;
  height: 30vw;
  box-shadow: #ccc 8rpx  8rpx  8rpx ;
  overflow: hidden;
}

.radar-container .circle {
  width: 80%;
  height: 80%;
  border-radius: 50%;
  --border-size: 3px;
  --border-angle: 0turn;
  --grid-bg: radial-gradient(
    transparent 69%,
    limegreen 69%,
    limegreen 70%,
    transparent 70%
  );
  --line-bg: transparent 50%, limegreen 50%, transparent 50.5%;
  background-image: conic-gradient(from var(--border-angle), transparent 10%, #0d0a 99%, limegreen 99.5%), linear-gradient(0deg, var(--line-bg)), linear-gradient(45deg, var(--line-bg)), linear-gradient(90deg, var(--line-bg)), linear-gradient(135deg, var(--line-bg)), var(--grid-bg), var(--grid-bg), var(--grid-bg);
  background-size: cover, cover, cover, cover, cover, 25% 25%, 50% 50%, 75% 75%;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 50%;
  border: solid 0.5vmin limegreen;
  -webkit-animation: bg-spin 3s linear infinite;
  animation: bg-spin 3s linear infinite;
  position: relative;
  filter: drop-shadow(0px 0px 10vmin black) blur(0.5px) contrast(200%);
}

@-webkit-keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}

@keyframes bg-spin {
  to {
    --border-angle: 1turn;
  }
}

.circle::after {
  content: "";
  display: block;
  position: absolute;
  top: 30%;
  left: 30%;
  width: 2vmin;
  height: 2vmin;
  background: limegreen;
  border-radius: 50%;
  -webkit-animation: move 18s steps(6) infinite;
  animation: move 18s steps(6) infinite;
}

@-webkit-keyframes move {
  33% {
    transform: translate(25vmin, 10vmin);
  }
  66% {
    transform: translate(15vmin, 30vmin);
  }
  100% {
    transform: translate(0vmin, 0vmin);
  }
}

@keyframes move {
  33% {
    transform: translate(25vmin, 10vmin);
  }
  66% {
    transform: translate(15vmin, 30vmin);
  }
  100% {
    transform: translate(0vmin, 0vmin);
  }
}

.circle::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: solid 1vmin limegreen;
  -webkit-animation: scale 3s linear infinite;
  animation: scale 3s linear infinite;
}

@-webkit-keyframes scale {
  from {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  51%, 100% {
    opacity: 0;
  }
}

@keyframes scale {
  from {
    transform: scale(0);
  }
  50% {
    transform: scale(1.2);
  }
  51%, 100% {
    opacity: 0;
  }
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}
</style>
<script >
export default {
  name:"Radar",
  props:{
    width:{
      type:String,default(){
        return "30vw"
      }
    },
    height:{
      type:String,default(){
        return "30vw"
      }
    }
  }
}
</script>
<template>
  <view class='radar-container' :style='{width:width,height:height}'>
    <view class='circle'></view>
  </view>
</template>

这里使用方法很简单:
只做了两个长宽参数,你可以自己扩

<radar width="30vw" height="30vw" />

参考来源:
https://codepen.io/shshaw/pen/OJENXEO