0

ページのタイトルを白から虹を通り抜けて白に戻すようにしようとしています。これが私のコードです：

CSS:

@-webkit-keyframes rainbowGlow {
from {
         background-color: whitesmoke;
     }
13% {
        background-color: red;
    }
25% {
        background-color: orange;
    }
38% {
        background-color: yellow;
    }
50% {
        background-color: green;
    }
63% {
        background-color: blue;
    }
75% {
        background-color: indigo;
    }
88% {
        background-color: violet;
    }
to {
       background-color: white;
   }
}

@-moz-keyframes rainbowGlow {
from {
         background-color: whitesmoke;
     }
13% {
        background-color: red;
    }
25% {
        background-color: orange;
    }
38% {
        background-color: yellow;
    }
50% {
        background-color: green;
    }
63% {
        background-color: blue;
    }
75% {
        background-color: indigo;
    }
88% {
        background-color: violet;
    }
to {
       background-color: white;
   }
}

@-o-keyframes rainbowGlow {
from {
         background-color: whitesmoke;
     }
13% {
        background-color: red;
    }
25% {
        background-color: orange;
    }
38% {
        background-color: yellow;
    }
50% {
        background-color: green;
    }
63% {
        background-color: blue;
    }
75% {
        background-color: indigo;
    }
88% {
        background-color: violet;
    }
to {
       background-color: white;
   }
}

@keyframes rainbowGlow {
from {
         background-color: whitesmoke;
     }
13% {
        background-color: red;
    }
25% {
        background-color: orange;
    }
38% {
        background-color: yellow;
    }
50% {
        background-color: green;
    }
63% {
        background-color: blue;
    }
75% {
        background-color: indigo;
    }
88% {
        background-color: violet;
    }
to {
       background-color: white;
   }
}

.WhiteRainbowGlow {
    color: white;
    font-size: 2em;
    font-family: 'Segoe UI Light', Candara, Consolas, Calibri, sans-serif !important;
    text-shadow: 4px 3px 6px #000000;
    text-shadow: 4px 3px 6px rgba(0, 0, 0, .5);
    display: inline;
    padding-right: 10px;

    animation-name: rainbowGlow;
    animation-duration: 1s;
    animation-delay: 1s;
}

HTML:

<h1 class="WhiteRainbowGlow">My Next Winner</h1>

私は何かを忘れていますか？何か間違ったことをしていますか？

4

2 に答える 2

1

これを WhiteRainbowGlow に追加します

    -webkit-animation: rainbowGlow 5s 1 linear;
    -moz-animation: rainbowGlow 5s 1 linear;

jsfiddle の例

于 2013-09-06T05:03:56.917 に答える