日: 2021年8月20日

.text{
    padding: 10px 0;
    margin: 0;
    font-size: 80px;
    font-weight: bold;
    background-image: linear-gradient(
        70deg,
        #dc143c 45%, /* font color */
        #FFF 50%,
        #dc143c 55% /* font color */
    );
    background-size: 500% 100%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: shine 2s infinite;
}

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

上から下

.text{
    padding: 10px 0;
    margin: 0;
    font-size: 80px;
    font-weight: bold;

    background-image: linear-gradient(
        0deg,
        #dc143c 45%, /* font color */
        #FFF 50%,
        #dc143c 55% /* font color */
    );
    background-size: 100% 400%;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: shine 2s infinite;
}

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

 

キラッと光るテキストのCSSデザインサンプル集