Template:Rainbow text/styles.css

.rainbow-text-gradient {
    background: linear-gradient(to right, #d32f2f, #f57c00, #fbc02d, #388e3c, #4fc3f7, #1976d2, #7b1fa2);
    color: transparent;
    animation: rainbow-gradient alternate ease-in-out infinite;
}

.rainbow-text-color {
    color: #d32f2f;
    animation: rainbow-color linear infinite;
}

.rainbow-text-background {
    background-color: #d32f2f;
    animation: rainbow-background linear infinite;
}

@keyframes rainbow-gradient {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 100% 0;
    }
}

@keyframes rainbow-color {
    0% {
        color: #d32f2f;
    }
    14.2857% {
        color: #f57c00;
    }
    28.5714% {
        color: #fbc02d;
    }
    42.8571% {
        color: #388e3c;
    }
    57.1429% {
        color: #4fc3f7;
    }
    71.4286% {
        color: #1976d2;
    }
    85.7143% {
        color: #7b1fa2;
    }
    100% {
        color: #d32f2f;
    }
}

@keyframes rainbow-background {
    0% {
        background-color: #d32f2f;
    }
    14.2857% {
        background-color: #f57c00;
    }
    28.5714% {
        background-color: #fbc02d;
    }
    42.8571% {
        background-color: #388e3c;
    }
    57.1429% {
        background-color: #4fc3f7;
    }
    71.4286% {
        background-color: #1976d2;
    }
    85.7143% {
        background-color: #7b1fa2;
    }
    100% {
        background-color: #d32f2f;
    }
}

/* [[Category:在模板命名空间下的CSS页面]] */