集中線CSS

sunburst.css

body { background-color: rgba(255, 255, , 0); margin: 0px auto; overflow: hidden; position: relative; }
body::before {
  --border-color: #fff;
  content: "";
　　display: block;
  position: absolute;
  top: calc(50% - 100vw);
  left: calc(50% - 100vw);
  width: 200vw;
  height: 200vw;
  background-image: repeating-conic-gradient(
      transparent 0,
      transparent 13deg,
      var(--border-color) 13deg,
      var(--border-color) 16deg
    ),
repeating-conic-gradient(
      transparent 0,
      transparent 20deg,
      var(--border-color) 20deg,
      var(--border-color) 30deg
    );

  animation-name: doya;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 1s;
  animation-iteration-count: infinite;
}
@keyframes doya {
  from {
    transform: rotate(0deg);
    transform-origin: center;
    -webkit-mask-image: radial-gradient(
    transparent 0%,
    transparent 12%,
    white 30%,
    white
  );
  }

  to {
     transform: rotate(360deg);   
    transform-origin: center;
    -webkit-mask-image: radial-gradient(
    transparent 0%,
    transparent 20%,
    white 40%,
    white
  );
  }
}