Домой / Рецепты CSS / Цветовая анимация текста CSS
Цветовая анимация текста CSS

Цветовая анимация текста CSS

Эффект анимации плавной смены цвета текста реализован с использованием только каскадной таблицы стилей CSS.

Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже.

Демо Скачать

HTML

<h1 class="logo">Wordpress-club.com</h1>

CSS

@media only screen {
 html,
 body {
 background: #222;
 overflow: hidden;
 height: 100%;
 }

 .logo {
 font-size: 80px;
 font-family: 'sonos-logoregular';
 text-align: center;
 background: -webkit-linear-gradient(left, #33235B, #D62229, #E97639, #792042, #33235B);
 background: linear-gradient(left, #33235B, #D62229, #E97639, #792042, #33235B);
 background-size: 3200px 200px;
 margin-top: 20vh;
 color: transparent;
 -webkit-background-clip: text;
 -webkit-animation: animate-logo;
 -webkit-animation-delay: 0;
 -webkit-animation-duration: 7s;
 -webkit-animation-timing-function: linear;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-fill-mode: forwards;
 transition: font-size 500ms ease-in-out;
 }
}
@media only screen and (min-width: 40.063em) {
 .logo {
 margin-top: 30vh;
 font-size: 80px;
 }
}
@media only screen and (min-width: 64.063em) {
 .logo {
 margin-top: 25vh;
 font-size: 80px;
 }
}
@media only screen and (min-width: 90.063em) {
 .logo {
 margin-top: 20vh;
 font-size: 80px;
 }
}
@media only screen and (min-width: 120.063em) {
 .logo {
 margin-top: 15vh;
 font-size: 80px;
 }
}
@-webkit-keyframes animate-logo {
 0% {
 background-position: 0 3200px;
 }
 100% {
 background-position: 3200px 0;
 }
}

Эффект анимации плавной смены цвета текста реализован с использованием только каскадной таблицы стилей CSS. Посмотреть и скачать демо пример вы можете перейдя по ссылкам ниже. HTML CSS @media only screen { html, body { background: #222; overflow: hidden; height: 100%; } .logo { font-size: 80px; font-family: 'sonos-logoregular'; text-align: center; background: -webkit-linear-gradient(left, #33235B, #D62229, #E97639, #792042, #33235B); background: linear-gradient(left, #33235B, #D62229, #E97639, #792042, #33235B); background-size: 3200px 200px; margin-top: 20vh; color: transparent; -webkit-background-clip: text; -webkit-animation: animate-logo; -webkit-animation-delay: 0; -webkit-animation-duration: 7s; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: forwards; transition: font-size 500ms ease-in-out; } } @media only screen and&hellip;

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

Рейтинг: 4.77 ( 6 голосов )
100

2 комментария

  1. Благодарю за замечательный пост!
    У себя на сайте добавила этот замечательный эффект;)
    Но есть вопрос. Как сделать этот эффект кроссбраузерным?
    Чтобы точнее — для эксплорера и мозилы что можно сделать?

  2. Опять — спасибо вам! Я знал один способ, но это уже совсем другое. У меня элемент меня цвет целиком, а тут все иначе. Красиво)) Этот эффект, хорошо будет смотреться с утонченным шрифтом.

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

Ваш email не будет опубликован.

*