div+css实现雷达扫描动画效果代码-html代码-BFW代码库

div+css实现雷达扫描动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现雷达扫描动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
html {
  height: 100%;
  display: grid;
  place-items: center;
  background: #020;
}

.circle {
  width: 60vmin;
  height: 60vmin;
  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.........完整代码请登录后点击上方下载按钮下载查看