css实现雷达渐变圆圈背景动画效果代码-html代码-BFW代码库

css实现雷达渐变圆圈背景动画效果代码

代码语言：html

所属分类：动画

代码描述：css实现雷达渐变圆圈背景动画效果代码

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


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

<head>

  <meta charset="UTF-8">
  

  
  
<style>
body {
  margin: 0;
  background-color: #111;
  overflow: hidden;
}

#container {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

#innerCircle {
  position: absolute;
  width: min(100vw, 100vh);
  height: min(100vw, 100vh);
  background: #111;
  z-index: 2;
  clip-path: url(#innerCircleClip);
}

#outerCircle {
  position: absolute;
  width: min(100vw, 100vh);
  height: min(100vw, 100vh);
  background: #111;
  z-index: 2;
  clip-path: url(#outerCircleClip);
}

.gradient {
  position: absolute;
  top: -100px; left: -100px; right: -100px; bottom: -100px;
}

#red {
  background: radial-gradient(circle at 50% 50%, rgba(255,0,0,1) 0%, rgba(0,0,0,0) 50%); 
}

#orange {
  background: radial-gradient(circle at 50% 50%, rgba(255,125,0,1) 0%, rgba(0,0,0,0) 50%); 
}

#yellow {
  background: radial-gradient(circle at 50% 50%, rgba(255,255,0,1) 0%, rgba(0,0,0,0) 50%); 
}

#green {
  background: radial-gradient(circle at 50% 50%, rgba(0,255,0,1) 0%, rgba(0,0,0,0) 50%); 
}

#blue {
  background: radial-gradient(circle at 50% 50%, rgba(0,0,255,1) 0%, rgba(0,0,0,0) 50%); 
}

#indigo {
  background: radial-gradient(circle at 50% 50%, rgba(0,125,255,1) 0%, rgba(0,0,0,0) 50%); 
}

#violet {
  background: radial-gradient(circle at 50% 50%, rgba(255,0,125,1) 0%, rgba(0,0,0,0) 50%); 
}
</style>



</head>

<body >
  <svg>
  <clipPath id="outerCircleClip" clipPathUnits="objectBoundingBox">
    <path d=".........完整代码请登录后点击上方下载按钮下载查看