Радужный текст в CSS (+анимированная версия)

css css3 html
Окрасить текст в цвета радуги можно при помощи свойства -webkit-background-clip: text;, которое создаёт маску в виде текста. Всё, что будет вне зоны текста, останется без изменений, а всё, что внутри неё - окрасится в цвет фона. Остаётся только сделать фон градиентом (или изображением) и добавить анимацию по желанию.
  1. .rainbow {
  2.   background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, violet);
  3.   -webkit-background-clip: text;
  4.   -webkit-text-fill-color: transparent;
  5.   font-size: 40px;
  6.   line-height: 40px;
  7. }
Радужный текст в CSS
  1. .rainbow-animated {
  2.   background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, violet);
  3.   background-size: 400% 400%;
  4.   -webkit-background-clip: text;
  5.   -webkit-text-fill-color: transparent;
  6.   -webkit-animation: rainbow 20s ease infinite;
  7.   animation: rainbow 20s ease infinite;
  8.   font-size: 25px;
  9.   line-height: 25px;
  10. }
  11.  
  12. @-webkit-keyframes rainbow {
  13.   0% { background-position: 0% 50% }
  14.   50% { background-position: 100% 50% }
  15.   100% { background-position: 0% 50% }
  16. }
  17.  
  18. @keyframes rainbow {
  19.   0% { background-position: 0% 50% }
  20.   50% { background-position: 100% 50% }
  21.   100% { background-position: 0% 50% }
  22. }
Радужный анимированный текст в CSS
Назад

Реклама

Мы в соцсетях

tw tg yt gt