Эффект анимации плавной смены цвета текста реализован с использованием только каскадной таблицы стилей 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 есть body
так как у меня на body фон сайта стоит. вставляя этот код все меняется не понятно как.
как можно заменить у этого кода body на другое?
оберни в другой контейнер с белым фоном