使用 CSS3 循环 Animation 的文本颜色变化

Question

我有想要制作动画的文字。 例如，不是在 hover 上，而是不断缓慢地从白色变为红色，然后再变回白色。

到目前为止，这是我的 CSS 代码：

#countText{
    color: #eeeeee;
    font-family: "League Gothic", Impact, sans-serif;
    line-height: 0.9em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-shadow: 0px 0px 6px ;
    font-size: 210px;
}

Answer 1

使用keyframes和animation属性

 p { animation: color-change 1s infinite; } @keyframes color-change { 0% { color: red; } 50% { color: blue; } 100% { color: red; } }

 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad quos autem beatae nulla in.</p>

带前缀的 CSS

p {
    -webkit-animation: color-change 1s infinite;
    -moz-animation: color-change 1s infinite;
    -o-animation: color-change 1s infinite;
    -ms-animation: color-change 1s infinite;
    animation: color-change 1s infinite;
}

@-webkit-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@-moz-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@-ms-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@-o-keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}
@keyframes color-change {
    0% { color: red; }
    50% { color: blue; }
    100% { color: red; }
}

Answer 2

我有一个小css，你可以用这个

 body { background-color: #333; display: flex; justify-content:center; align-items: center; height: 100vh; }.text-rainbow-animation { font-family:arial black; font-size:70px; background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet, red); -webkit-background-clip: text; -webkit-text-fill-color: transparent; animation: rainbow-animation 35s linear infinite; } @keyframes rainbow-animation { to { background-position: 4500vh; } }

 <div class="text-rainbow-animation">RAINBOW TEXT</div>

Answer 3

另一个示例：

 .center { margin: 0 auto; } .awesome { font-family: futura; font-style: italic; width: 100%; margin: 0 auto; text-align: center; color: #313131; font-size: 45px; font-weight: bold; position: absolute; -webkit-animation: colorchange 20s infinite alternate; } @-webkit-keyframes colorchange { 0% { color: blue; } 10% { color: #8e44ad; } 20% { color: #1abc9c; } 30% { color: #d35400; } 40% { color: blue; } 50% { color: #34495e; } 60% { color: blue; } 70% { color: #2980b9; } 80% { color: #f1c40f; } 90% { color: #2980b9; } 100% { color: pink; } }

 <div class='center'> <p class="awesome">ISN'T THIS AWESOME!</p> </div>