使用CSS3循环动画文本颜色更改

Question

我有要制作动画的文字.例如,不是在悬停,而是从白色到红色不断变化,然后再次变回白色.

这是我目前的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财产

HTML

<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; }
}

DEMO

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>