顏色改變文本

-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

顏色改變文本

回答

相關問題