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

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

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

Exact matches only

Search in title

Search in content

Search in excerpt

Hidden

Apocalypse

"Думал, что пишу девушке одно, а написал, что лошадь мной попользовалась и бросила. Она долго не могла унять свой смех" 😆 😆 😆

2022-01-10 15:44:28

Apocalypse

@m1haluc4, да ничего особо. Думал, будет война, но пронесло. Остальные мысли на этом фоне кажутся менее важными

2022-01-10 15:45:15

m1haluc4

Да, это дело такое. Надеюсь, все устаканится и будет хорошо

2022-01-10 16:12:45

Apocalypse

@m1haluc4, надеюсь на это

2022-01-10 17:27:42

Dased

Здравствуйте, почему в комплекте нет оригинальных иконок, что идут с меню
https://imapo.ru/%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%BE%D0%B5-%D0%B2%D0%B5%D1%80%D1%82%D0%B8%D0%BA%D0%B0%D0%BB%D1%8C%D0%BD%D0%BE%D0%B5-%D0%BC%D0%B5%D0%BD%D1%8E-css3/

2022-01-13 15:33:28

Apocalypse

@Dased, привет. Потому что там используются не обычные иконки, а шрифт иконок

2022-01-13 15:41:56

Dased

а как можно их добавить?

2022-01-13 15:54:15

Apocalypse

@Dased, они подключаются CSS файлом. В инструкции по установки всё есть. Там между тегами и вставляется шрифт FontAwesome. Он и отвечает за иконки

2022-01-14 21:21:29

Apocalypse

@Dased, а вообще, если к какому-то материалу есть вопросы, то лучше оставлять их в комментариях. Здесь в чате ответы затеряются, а там они могут быть полезны другим пользователям

2022-01-14 21:22:30

Ярослав Светлый

Добавлена возможность авторизовываться и регистрироваться на сайте через facebook

2022-01-17 12:33:30

......

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

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

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

Развивающаяся лента на HTML5 Canvas

Огненная звезда у курсора на HTML5 Canvas

Анимированная кнопочка Твиттера на CSS3 и CSG

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

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