光影效果

1、圆形光影

image.png

css:
 #circle{
    --colorA: #37C1FF;
    fill: none;
    stroke-width: 1;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke: #fff;
    stroke-dasharray:314,314;
    animation: rotate 2s infinite linear;
    filter:
      drop-shadow(0 0 2px var(--colorA))
      drop-shadow(0 0 5px var(--colorA))
      drop-shadow(0 0 10px var(--colorA))
      drop-shadow(0 0 15px var(--colorA))
      drop-shadow(0 0 25px var(--colorA));
  }
  @keyframes rotate {
    0% {
      stroke-dashoffset: 0;
    }
    100% {
      stroke-dashoffset: 314;
    }
  }
  body{
    background: #000;
  }

html:
<svg  width="100%" height="100%" >
  <circle id="circle" cx="50" cy="50" r="50"   />
</svg>

2、半圆形光影效果

image.png

css:
 body, html {
    width: 100%;
    height: 100%;
    display: flex;
    background: #000;
  }

  div {
    position: relative;
    margin: auto;
    width: 600px;
    height: 600px;
    --colorA: #b78eff;
  }
  div::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     border-radius: 50%;
     border-left: 1px solid #fff;
     filter:
       drop-shadow(0 0 2px var(--colorA))
       drop-shadow(0 0 5px var(--colorA))
       drop-shadow(0 0 10px var(--colorA))
       drop-shadow(0 0 20px var(--colorA));
     animation: rotate 3s infinite linear;
   }
    div::after {
     --colorA: #ffec41;
     animation-delay: -1.5s;
   }
  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }

html:
<div></div>