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

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

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

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

Новый пост от CTYDEHT в теме Скрипт информера по месяцам

2021-02-19 12:57:26

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

Новый пост от Apocalypse в теме Скрипт информера по месяцам

2021-02-19 12:59:03

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

Новый пост от CTYDEHT в теме Скрипт информера по месяцам

2021-02-19 13:03:48

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

Новый пост от Apocalypse в теме Скрипт информера по месяцам

2021-02-19 13:04:27

T-34

🥳 🚜 🚀

2021-03-20 01:09:34

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

Новый пост от andrey.vorobv в теме Ldonate - проблемма с подключением

2021-03-21 13:24:51

Gor

Добрый день уже замучался с данной темой , но как говориться спросишь не узнаешь

у меня есть скрипт который через js включает темную тему при нажатии кнопки

я его установил на свой сайт gor.ovh ( только в моб версии при нажатии на три полоски в верхнем углу если что можно посмотреть в респонсиве страницы )

но возникла проблема скрипт полностью работал , но при смене страницы опять включалась дефолтная тема и приходиться снова нажимать на кнопку темной темы так же при обновление страницы

как я понял нужно записывать данные в локал сторадж или куки я попробовал сделать по примерам которые были опубликованы на этом форуме ранее , нр у меня не вышло

https://jsfiddle.net/yguzhp0f/5/

<button onclick=enableDark() style="color: white;
top: 10px;
position: relative;
border-radius: 4px;
background: linear-gradient(to l

2021-03-24 11:45:54

Apocalypse

@Gor, создай тему с проблемой на форуме

2021-04-11 13:03:28

Apocalypse

Дароф, народ. Как думаете, что размещать на сайте дальше?

2021-04-24 19:24:15

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

Новый пост от Apocalypse в теме Ldonate - проблемма с подключением

2021-04-24 19:29:06

......

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

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

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

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

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

Май 2021
Пн	Вт	Ср	Чт	Пт	Сб	Вс
					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

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

Прогресс-бар загрузки страницы как в Яндекс Браузере при помощи jQuery и CSS3

Свой фоновый рисунок для любого текста на CSS3

Фейерверки на HTML5 Canvas и jQuery

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

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