loading...
Cover image for Rainbow CSS @keyframes using text-shadow

Rainbow CSS @keyframes using text-shadow

zoedreams profile image ☮️✝️☪️🕉☸️✡️☯️ ・1 min read

SOmething fun, something simple. I know there are lots of way to do this; however this seems to be the most performant thus far.

  @keyframes loading-header {
    0% {
      color: violet;
    }

    17% {
      color: indigo;
    }

    34% {
      color: blue;
    }

    51% {
      color: green;
    }

    68% {
      color: yellow;
    }

    84% {
      color: orange;
    }

    100% {
      color: red;
    }
  }

  #view.loading>.ui.segment .ui.header {
    position: fixed;
    top: 0.420rem;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0.840;
    font-weight: bold;
    -webkit-text-stroke-width: 0.420rem;
    -webkit-text-stroke-color: rgba(253, 0, 166, 0.420);
    animation: loading-header .840s cubic-bezier(1, 0, 0.000001, 1) infinite !important;
  }
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide