Раніше для миготіння тексту застосовувався спеціальний елемент <blink>, але браузери його вже не підтримують і вважають застарілим. Тепер для тих же цілей використовується властивість animation, що дозволяє плавно змінювати значення стильових властивостей за вказаний час.
Для створення миготіння створимо клас blink і для нього встановимо анімацію, що нескінченно повторюється, через параметр infinite. Саме миготіння відбувається через властивість opacity, за рахунок зміни прозорості тексту від 1 до 0, як показано на прикладі 1.
Приклад 1. Миготливий текст
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Мигання</title> <style> .blink { animation: blink 2s infinite; /* Параметри анімації */
}
@keyframes blink { from { opacity: 1; /* Непрозорий текст */
}
to { opacity: 0; /* Прозорий текст */
}
}
</style>
</head>
<body> <p class="blink">Увага</p>
</body>
</html>Тут блимання встановлено дві секунди, це значення можна збільшувати або зменшувати на свій розсуд.