html, body {

    width: 100%;

    height: 100%;

    display: flex;

}

​

@property --offset {

  syntax: '<length>';

  inherits: false;

  initial-value: 5px;

}

​

@property --deg {

  syntax: '<angle>';

  inherits: false;

  initial-value: 1deg;

}

​

​

div {

    position: relative;

    margin: auto;

    // background: #000;

    line-height: 1.5;

    font-size: 128px;

    font-weight: bold;

    text-align: justify;

    cursor: pointer;

}

​

.linear {

    color: #000;

    &:hover {

        color: transparent;

        background: repeating-radial-gradient(circle at 0 0 , #000 calc(var(--offset) - 5px), #000 var(--offset), #fff var(--offset), #fff calc(var(--offset) + 5px));

        background-clip: text;

        animation: move .5s infinite linear;

    }

}

​

.colorful {

    &:hover {

        background-image: 

            linear-gradient(var(--deg), red, orange, yellow, green, cyan, blue, darkviolet),

            repeating-radial-gradient(circle at 0 0 , #000 calc(var(--offset) - 5px), #000 var(--offset), #fff var(--offset), #fff calc(var(--offset) + 5px));

        background-blend-mode: screen;

        animation: move .5s infinite linear, rotate 20s infinite linear;

    }

}

​

@keyframes move {

    to {

        --offset: 15px;

    }

}

​

@keyframes rotate {

    to {

        --deg: 361deg;

    }

}