颜色改变文本

-3

是否有可能使用HTML，PHP和CSS改变颜色的文本（不断刷新）？如果不是，我会怎么做？颜色改变文本

我一直没能找到这样的事情其他地方

来源

2016-06-09 Benjamin Lewis

不，你需要的JavaScript。 – AbraCadaver

@AbraCadaver - 我该怎么办？ –

问题要求我们建议，查找或推荐书籍，工具，软件库，插件，教程或其他场外资源都是偏离主题的堆栈溢出堆栈溢出 –

使用CSS动画可以使文本改变颜色。这个例子给文本一个彩虹动画。

HTML：

.rainbow { 
 
    -webkit-animation: rainbow 1s infinite; 
 
    -mos-animation: rainbow 1s infinite; 
 
    -ms-animation: rainbow 1s infinite; 
 
    -o-animation: rainbow 1s infinite; 
 
    animation: rainbow 1s infinite; 
 
} 
 

 
@keyframes rainbow { 
 
    0% {color: #FF0000;} 
 
    10% {color: #FF8000;} 
 
    20% {color: #FFFF00;} 
 
    30% {color: #80FF00;} 
 
    40% {color: #00FF00;} 
 
    50% {color: #00FF80;} 
 
    60% {color: #00FFFF;} 
 
    70% {color: #0080FF;} 
 
    80% {color: #0000FF;} 
 
    90% {color: #8000FF;} 
 
    100% {color: #FF0080;} 
 
} 
 

 
@-webkit-keyframes rainbow { 
 
    0% {color: #FF0000;} 
 
    10% {color: #FF8000;} 
 
    20% {color: #FFFF00;} 
 
    30% {color: #80FF00;} 
 
    40% {color: #00FF00;} 
 
    50% {color: #00FF80;} 
 
    60% {color: #00FFFF;} 
 
    70% {color: #0080FF;} 
 
    80% {color: #0000FF;} 
 
    90% {color: #8000FF;} 
 
    100% {color: #FF0080;} 
 
} 
 

 
@-mos-keyframes rainbow { 
 
    0% {color: #FF0000;} 
 
    10% {color: #FF8000;} 
 
    20% {color: #FFFF00;} 
 
    30% {color: #80FF00;} 
 
    40% {color: #00FF00;} 
 
    50% {color: #00FF80;} 
 
    60% {color: #00FFFF;} 
 
    70% {color: #0080FF;} 
 
    80% {color: #0000FF;} 
 
    90% {color: #8000FF;} 
 
    100% {color: #FF0080;} 
 
} 
 

 
@-ms-keyframes rainbow { 
 
    0% {color: #FF0000;} 
 
    10% {color: #FF8000;} 
 
    20% {color: #FFFF00;} 
 
    30% {color: #80FF00;} 
 
    40% {color: #00FF00;} 
 
    50% {color: #00FF80;} 
 
    60% {color: #00FFFF;} 
 
    70% {color: #0080FF;} 
 
    80% {color: #0000FF;} 
 
    90% {color: #8000FF;} 
 
    100% {color: #FF0080;} 
 
} 
 

 
@-o-keyframes rainbow { 
 
    0% {color: #FF0000;} 
 
    10% {color: #FF8000;} 
 
    20% {color: #FFFF00;} 
 
    30% {color: #80FF00;} 
 
    40% {color: #00FF00;} 
 
    50% {color: #00FF80;} 
 
    60% {color: #00FFFF;} 
 
    70% {color: #0080FF;} 
 
    80% {color: #0000FF;} 
 
    90% {color: #8000FF;} 
 
    100% {color: #FF0080;} 
 
}

<div class="rainbow">rainbows are awesome</div>

来源

2016-06-09 15:53:14

ahhhhh我的眼睛！ – cmorrissey

谢谢！确切地说，我在找什么 –

你可以做到这一点只是CSS3。用@规则keyframes，我已经包含了对不同浏览器的支持。

p.mytext { 
 
    -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; } 
 
}

<p class="mytext">Random Text</p>

来源

2016-06-09 15:56:41

颜色改变文本

回答

相关问题