Q
顏色改變文本
-3
A
回答
2
使用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>
+0
ahhhhh我的眼睛! – cmorrissey
+0
謝謝!確切地說,我在找什麼 –
1
你可以做到這一點只是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>
相關問題
- 1. CKEditor文本顏色按鈕不改變文本顏色
- 2. 文本顏色並不在AlertDialog改變
- 3. 使用jquery改變文本的顏色
- 4. 改變子文本框的顏色
- 5. 如何使文本顏色被改變
- 6. ListView項目不改變文本顏色
- 7. 更改文本顏色與可變
- 8. 鏈接文本而不改變文本的顏色爲藍色
- 9. 改變顏色的顏色
- 10. 改變點擊顏色爲隨機顏色的文本顏色(按鈕)
- 11. 改變顏色
- 12. 改變顏色
- 13. 改變顏色
- 14. 改變顏色
- 15. 改變顏色
- 16. 改變顏色
- 17. 改變顏色
- 18. 改變顏色
- 19. 改變顏色
- 20. JQuery更改文本顏色
- 21. 更改TimePicker文本顏色
- 22. 更改文本顏色,$%
- 23. 更改文本顏色CSS3
- 24. UITextView文本顏色不變
- 25. 文本顏色變化(8086)
- 26. 更改與父文本顏色不同的子文本顏色?
- 27. 根據文本的值改變文本顏色
- 28. 改變只讀文本框的文本顏色c#
- 29. 使用微調改變文本視圖的文本顏色
- 30. CSS改變顏色
不,你需要的JavaScript。 – AbraCadaver
@AbraCadaver - 我該怎麼辦? –
問題要求我們建議,查找或推薦書籍,工具,軟件庫,插件,教程或其他場外資源都是偏離主題的堆棧溢出堆棧溢出 –