CSS 使用 CSS3 的文本颜色变化循环动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16782498/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-29 23:01:44 来源:igfitidea点击:
Looping Animation of text color change using CSS3
提问by Alex Jj
I have text that I want to animate. Not on hover, for example but continually changing slowly from white to red and then back to white again.
我有想要动画的文本。例如，不是在悬停时，而是不断从白色缓慢变为红色，然后再次变回白色。
Here is my CSS code so far:
到目前为止，这是我的 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;
}
回答by Sourabh
Use keyframesand animationproperty
使用keyframes和animation财产
HTML
HTML
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui ad quos autem beatae nulla in.</p>
CSS
CSS
p {
animation: color-change 1s infinite;
}
@keyframes color-change {
0% { color: red; }
50% { color: blue; }
100% { color: red; }
}
CSS with prefixes
带前缀的 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; }
}
回答by Omar Mughrabi
Another SampleL
另一个样本L
HTML:
HTML：
<div class='center'>
<p class="awesome">ISN'T THIS AWESOME!</p>
</div>
CSS:
CSS：
.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;
}
}
