Раскрасить текст разными цветами

171
13 ноября 2018, 17:00

Имеется 4 цвета: red, yellow, blue, green

Имеется динамичный текст длина которого постоянно меняется.

Вопрос: Как раскрасить 100% текста 25% каждого цвета?

Answer 1

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>

Answer 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>

Скрипт рассчитан на разукраску статического текста, но это поправимо.

READ ALSO
модуль cluster и worker_threads
javascript

модуль cluster и worker_threads

 132
Клик с последующим scrollLeft. Как?
javascript

Клик с последующим scrollLeft. Как?

Значит есть "горизонтальная" разметка, родитель 200% ширины и высота 100vh, две дочерние секции по 100% ширины, такой же высоты, overflow-y: hidden; Пс

 145
Не работает скрипт плавной прокрутки
javascript

Не работает скрипт плавной прокрутки

Не работает скрипт плавной прокрутки к нужному элементу на странице, вместо плавной прокрутки при нажатии на кнопку, срабатывает мометальная...

 180
Как нарисовать на canvas только часть картинки
javascript

Как нарисовать на canvas только часть картинки

есть 2 картинки и canvas, первая картинка рисуется полностью на весь canvasА вторую нужно показывать по частям, при чём не кругами или квадратами,...

 149