きらりと輝くテキスト

<span class="shinText">1st code</span>

.shinText {
  font-weight: 800;
  font-size: 28px;
  display: inline-block;
  background-image: linear-gradient(
    60deg,
    #0a1930 0%,
    #1e3a5f 38.98%,
    #3a6b9e 41.01%,
    #4f94cd 42.77%,
    #7cb9e8 44.51%,
    #b0e0e6 46.04%,
    #e6f3f7 47.48%,
    #c9e3f3 49.14%,
    #a7d2e9 51.53%,
    #6ca5d3 54.28%,
    #4682b4 56.29%,
    #1e5b80 58.88%,
    #0a1930 100%
  );
  background-size: 500% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  animation: shine 5s infinite;
}

@keyframes shine {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}