主页 / 问题 / 871625
Accepted
Денис Небесный
Asked:2020-08-22 01:44:55 +0000 UTC2020-08-22 01:44:55 +0000 UTC

具有不同颜色的彩色文本

  • 772

有4种颜色：红、黄、蓝、绿

有一个长度不断变化的动态文本。

问题：如何用每种颜色的 25% 为 100% 的文本着色？

javascript

2 个回答

  1. Best Answer

    body {
  background: silver;
  font-size: 2em;
}

span {
  background: linear-gradient(to right, red 25%, yellow 25%, yellow 50%, blue 50%, blue 75%, green 75%);
  color: white;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
    <span>Текст произвольной длины</span>

    • 4

  2. 曾几何时，我在 JS 中制作了多色动画缓慢闪烁的文字，但那时我对语言的了解较少，现在我会写不同的东西。但它可能会派上用场：

    var mytext = "Когда-то я делал на JS разноцветный анимированный медленно переливающийся текст, но тогда моих знаний языка было меньше, и сейчас написал бы по-другому. Но может пригодится. Скрипт рассчитан на разукраску статического текста, но это поправимо.";
var fontface = ["Arial", "Lucida Console", "Comic Sans Ms", "MS Sans Serif", "Arial Black", "verdana", "courier"],
st = 0,
out = document.getElementById("out"),
e = "";
for(i = 0; i < mytext.length; i ++)e += "<span id=p" + i + ">" + mytext[i] + "</span>";
out.innerHTML = e;
var st = sti = stb = 0, it = it1 = bt = bt1 = "";
for(i = 0; i < mytext.length; i++){
	var b2 = document.getElementById("p" + i);
	if(sti == 8){sti = 0; it = "<i>"; it1= "</i>"}else{it = it1 = ""};
	if(stb == 10){stb = 0; bt = "<b>"; bt1 = "</b>"}else{bt = bt1 = ""};
	b2.innerHTML = "<font face='" + fontface[st] + "'>" + it + bt + b2.innerHTML + bt1 + it1 + "</font>";
	st ++; sti ++; stb ++;
	if(st == fontface.length)st = 0;
}
function decorate(){
	for(i = 0; i < mytext.length; i ++){	
		var b1 = document.getElementById("p" + i),
		R = 176 + Math.floor(80 * Math.sin(i + st / 17)),
		G = 176 + Math.floor(80 * Math.sin(i / 2.7 + st / 10)),
		B = 176 + Math.floor(80 * Math.sin(i / 4.3 - st / 7));
		b1.style.color = "rgb(" + R + ", " + G + ", " + B + ")";
	}
	st++;
}
decorate();
setInterval("decorate()", 100); // если эту строку убрать, отключится анимация
    <body bgcolor=#003>
<div id=out></div>
</body>

    该脚本旨在为静态文本着色，但这是可以修复的。

    • 2

相关问题