Текст, постоянно меняющий свой цвет на CSS3

Разместил: Apocalypse
Опубликовано: 14 июня 2016

Данный пример показывает, как можно силами CSS3 сделать текст, который будет постоянно менять свой цвет Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

/*This is coded CSS rainbow*/
.rainbow {
-webkit-animation: rainbow 5s infinite;
-ms-animation: rainbow 5s infinite;
-o-animation: rainbow 5s infinite;
animation: rainbow 5s infinite;
cursor: pointer;
}

@-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;
}
}

@-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;
}
}

@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;
}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

/*This is coded CSS rainbow*/

.rainbow {

-webkit-animation: rainbow 5s infinite;

-ms-animation: rainbow 5s infinite;

-o-animation: rainbow 5s infinite;

animation: rainbow 5s infinite;

cursor: pointer;

}

@-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;

}

@-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;

}

@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;

}

2#: Для того, чтобы придать нужному блоку с текстом этот эффект, просто добавьте ему класс rainbow:

<div class="rainbow">IMAPO.RU - Только самые лучшие скрипты</div>

1	<div class="rainbow">IMAPO.RU - Только самые лучшие скрипты</div>

Метки: CSS3 Rainbow Text Радуга Смена цвета Текст Цвет Эффект

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Читайте также:

Вы точно не робот?

0 Комментарий

Межтекстовые Отзывы

Посмотреть все комментарии

Apocalypse

@Al-Sher, тоже вроде норм

2022-11-12 10:54:22

Всевидящее око

Новый комментарий от пользователя fapalnaapo: «background: #000; не действивелен ( фон всегда черный» в материале Реалистичный метеорит на HTML5 Canvas

2022-11-15 15:33:22

Всевидящее око

Новый комментарий от пользователя Al-Sher: «Там еще в js указан фон #000. Можно указать rgba по идеи
ctx.fillStyle = '#000'; - сейчас
ctx.fillStyle = "rgba(255, 255, 255, 0)"; - можно сделать
» в материале Реалистичный метеорит на HTML5 Canvas

2022-11-15 23:09:59

stalker1313

@Apocalypse, в целом отвратительно, а так норм 😅

2022-11-26 17:45:49

Apocalypse

@stalker1313, это как?

2022-11-26 20:28:00

stalker1313

@Apocalypse, это именно вот сейчас вроде ничего, но в целом @опка) как-то так

2022-11-26 20:36:05

Apocalypse

@stalker1313, ты в этом не одинок, поверь мне 😁

2022-11-26 20:36:42

stalker1313

@Apocalypse, это да)

2022-11-26 21:22:52

Всевидящее око

Новый комментарий от пользователя Насаат: «Не работает ссылка на яндекс диск!!!» в материале Vysor 3.0.84 Pro Full - управление Android телефоном с компьютера на ОС Windows

2022-12-01 21:58:55

Всевидящее око

Новый комментарий от пользователя Apocalypse: «Залил к себе на хостинг: //imapo.ru/download/app.zip

Оригинальные ссылки в этой теме: https://4pda.to/forum/index.php?showtopic=775675&st=280» в материале Vysor 3.0.84 Pro Full - управление Android телефоном с компьютера на ОС Windows

2022-12-01 22:10:25

......

Для публикации сообщений в чате необходимо авторизоваться

Текст, постоянно меняющий свой цвет на CSS3

Читайте также:

Посетители сайта

Панель управления

Декабрь 2022
Пн	Вт	Ср	Чт	Пт	Сб	Вс
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Текст, постоянно меняющий свой цвет на CSS3

Читайте также:

Листья, кружащиеся в 3D на чистом CSS3

Блуждающие гравитационные звёзды на HTML5 Canvas

Огненное око на HTML5 Canvas

Посетители сайта

Панель управления