Як створити на css миготливий текст старий і новий спосіб
Привіт, шановні Новомосковсктелі мого блогу. Сьогодні я вам розповім, як зробити за допомогою css миготливий текст. Насправді це досить легко реалізувати, зараз я вам покажу правильний спосіб.
Старий і неправильний варіант
Отже, раніше миготіння тексту можна було задати за допомогою властивості:
Всі ми, вебмастера і розробники, постійно працюємо з сайтами. Хотів би вам порекомендувати майданчики, якими користуюся сам:- Reg.ru - тут реєструю і продовжую доменні імена, дуже надійна компанія!
- HostIQ - хостинг преміум якості.
- Ihor - більш бюджетний, але теж дуже якісний хостинг-провайдер.
- Telderi.ru - єдина надійна біржа в рунеті, на якій можна купити готові сайти з доходом!
Однак IE не підтримує це властивість. До того ж, воно жахливо працює і в сучасних браузерах. Але найбільша проблема цього способу в тому, що ви ніяк не можете налаштувати миготіння, вибрати кольору, періодичність і т.д. Зараз ми розглянемо спосіб, який все це враховує і дозволяє дуже гнучко налаштувати миготіння.
Робимо за допомогою анімації
Ми будемо використовувати анімацію, для цього потрібно створити набір кадрів, що описують ефект, після чого застосувати його до потрібного елементу. Детально про анімацію я напишу в майбутньому, сьогодні ж я просто покажу вам прийом. Отже, зробимо так, щоб у тексту змінювався колір і це відбувалося постійно. Створимо набір кадрів:
Цей код пишеться в css файлі в довільному місці. Він означає наступне: на початку анімації (ключове слово from), колір тексту буде білим, а в кінці - зеленим. Тепер кадри створені і потрібно зв'язати їх з текстом. Припустимо, в нашому html-коді є такий шматок:
Блоку задані якісь базові властивості, але суть не в них. Щоб зв'язати кадри з елементом потрібно написати наступне:
animation-name: blink;
animation-duration: 1s;
Це два обов'язкових властивості, щоб анімація працювала. Як ви пам'ятаєте, ми назвали наш keyframes - blink. тому саме це значення вписано в ім'я. Duration цей час виконання всієї анімації. Чим менше воно, тим швидше буде виконуватися. Відповідно, якщо поставити 0,2 секунди, то миготіння буде дуже швидким і різким.
Тепер якщо ви відновите сторінку, то анімація виконається, але тільки один раз, а нам адже потрібно миготіння. Щоб його реалізувати, потрібно зробити нескінченне повторення анімації. Для цього додаємо такий код:
Це властивість відповідає за кількість повторень анімації. Тут можна задати числове значення, але infinite встановлює нескінченний повтор. Отже, ми реалізували миготіння. Як це виглядає, можете подивитися прямо тут:
Якщо вам потрібно переливання декількох кольорів, можна просто змінити кадри:
Тепер колір тексту буде спочатку білим, потім сірим, в кінці - чорним. Ви можете додавати будь-які інші ефекти до тексту, підкреслення, зміна накреслення, тіні і т.д. Якщо ви хочете зробити все властивості анімації доступними в старіших версіях браузерів, потрібно продублювати їх з префіксом -webkit.