Текст, постоянно меняющий свой цвет на 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 Комментарий

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

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

SPORT TV

@Apocalypse, привет, помощь нужна - на связи kinouser

2022-05-01 08:20:22

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

Добавлен новый комментарий от пользователя SPORT TV: «Привет Апо, перестал данный скрипт хорошо работать, после имени цитируемого подставляется пара скобочек. Может глянешь что с ним не так, спасибо

Это kinouser)» в материале Цитирование всего комментария by Apocalypse для uCoz

2022-05-02 14:19:56

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

Добавлен новый комментарий от пользователя Apocalypse: «Как выяснилось, проблема на стороне козы» в материале Цитирование всего комментария by Apocalypse для uCoz

2022-05-04 19:37:44

XemorDio

Живой сайт смотрю ещё

2022-05-11 09:58:27

Apocalypse

@XemorDio, ну... только в глубокой спячке

2022-05-15 12:54:49

iadarch

Всем добрый день! Не могли бы кое с чем помочь? Нашла здесь нудный эффект для сайта "летающие светлячки", на интересующий меня вопрос так и не ответили, поэтому решила спросить здесь. Можно ли сделать так, чтобы данный эффект вставлялся никак отдельный контейнер, а поверх изображения/контейнера с фоновым изображением? Простите, я новичок, разбираюсь потихоньку во всем. Оставляю ссылку на статью https://imapo.ru/летающие-светлячки-на-html5-canvas/#comment-22229

2022-05-26 15:42:31

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

Добавлен новый комментарий от пользователя iadarch: «Добрый день! А если нужно вставить "светлячков" поверх хедера с фоновым изображением? Как поступить тогда? Сколько не пыталась сделать, но ничего не выходит, вставляется на сером фоне после контейнера » в материале Летающие светлячки на HTML5 Canvas

2022-06-14 10:06:29

Apocalypse

Домен продлён ещё на год. Живём, господа 😎

2022-06-21 19:48:16

Apocalypse

Если честно, то это был целый квест после того, как наложили санкции. Я просто не мог оплатить домен два месяца тупо потому, что Мастер Кард не работал между нашими странами и рублёвые платежи отклонялись

2022-06-21 19:49:56

Al-Sher

@Apocalypse, Ну хотя бы в одну сторону есть еще возможности проводить платежи 👻

2022-06-22 13:39:34

......

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

Текст, постоянно меняющий свой цвет на 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

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

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

Анимированная кинематографическая лента с фильмами на HTML5 Canvas

Стилизация чекбоксов на чистом CSS

Эффектное увеличение изображений с использованием CSS3

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

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