css模拟雷达扫描动画

      <div class="radar-scan"><div class="radar-container" /></div>

样式：

  .radar-scan {background-image: linear-gradient(0deg,transparent 24%,rgba(32, 255, 77, 0.15) 25%,rgba(32, 255, 77, 0.15) 26%,transparent 27%,transparent 74%,rgba(32, 255, 77, 0.15) 75%,rgba(32, 255, 77, 0.15) 76%,transparent 77%,transparent),linear-gradient(90deg,transparent 24%,rgba(32, 255, 77, 0.15) 25%,rgba(32, 255, 77, 0.15) 26%,transparent 27%,transparent 74%,rgba(32, 255, 77, 0.15) 75%,rgba(32, 255, 77, 0.15) 76%,transparent 77%,transparent);background-size: 2rem 2rem;width: 200px;height: 200px;position: relative;padding: 0;margin: 0;font-size: 1.6rem;}.radar-container {// background: radial-gradient(//     center,//     rgba(32, 255, 77, 0.3) 0%,//     rgba(32, 255, 77, 0) 75%//   ),//   repeating-radial-gradient(//     rgba(32, 255, 77, 0) 5.8%,//     rgba(32, 255, 77, 0) 18%,//     #20ff4d 18.6%,//     rgba(32, 255, 77, 0) 18.9%//   ),//   linear-gradient(//     90deg,//     rgba(32, 255, 77, 0) 49.5%,//     #20ff4d 50%,//     #20ff4d 50%,//     rgba(32, 255, 77, 0) 50.2%//   ),//   linear-gradient(//     0deg,//     rgba(32, 255, 77, 0) 49.5%,//     #20ff4d 50%,//     #20ff4d 50%,//     rgba(32, 255, 77, 0) 50.2%//   );background:-webkit-radial-gradient(center,rgba(32, 255, 77, 0.3) 0%,rgba(32, 255, 77, 0) 75%),// 调整蜘蛛网盘线数-webkit-repeating-radial-gradient(rgba(32, 255, 77, 0) 5.8%,rgba(32, 255, 77, 0) 18%,#20ff4d 18.6%,rgba(32, 255, 77, 0) 18.9%),// 横线-webkit-linear-gradient(90deg,rgba(32, 255, 77, 0) 49.5%,#20ff4d 50%,#20ff4d 50%,rgba(32, 255, 77, 0) 50.2%),// 竖线-webkit-linear-gradient(0deg,rgba(32, 255, 77, 0) 49.5%,#20ff4d 50%,#20ff4d 50%,rgba(32, 255, 77, 0) 50.2%);width: 200px;height: 200px;position: relative;left: 50%;top: 50%;transform: translate(-50%, -50%);border-radius: 50%;border: 0.2rem solid #0cdd36;overflow: hidden;}.radar-container:before {content: " ";display: block;position: absolute;width: 100%;height: 100%;border-radius: 50%;animation: scanSpot 5s infinite;animation-timing-function: linear;animation-delay: 1.4s;}.radar-container:after {content: " ";display: block;background-image: linear-gradient(44deg,rgba(0, 255, 51, 0) 50%,#00bb22 100%);width: 50%;height: 50%;position: absolute;top: 0;left: 0;animation: scan 5s infinite;animation-timing-function: linear;transform-origin: bottom right;border-radius: 100% 0 0 0;}@keyframes scan {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}@keyframes scanSpot {14% {background: radial-gradient(2vmin circle at 75% 70%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%);}14.0002% {background: radial-gradient(2vmin circle at 75% 70%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%),radial-gradient(2vmin circle at 63% 72%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%);}25% {background: radial-gradient(2vmin circle at 75% 70%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%),radial-gradient(2vmin circle at 63% 72%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%),radial-gradient(2vmin circle at 56% 86%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%);}26% {background: radial-gradient(2vmin circle at 75% 70%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%),radial-gradient(2vmin circle at 63% 72%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%),radial-gradient(2vmin circle at 56% 86%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%);opacity: 1;}100% {background: radial-gradient(2vmin circle at 75% 70%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%),radial-gradient(2vmin circle at 63% 72%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%),radial-gradient(2vmin circle at 56% 86%,#ffffff 10%,#20ff4d 30%,rgba(255, 255, 255, 0) 100%);opacity: 0;}}