"Создание мигающего текста в CSS 3: сглаживание эффекта"

Быстрый ответ

Для того чтобы с помощью CSS3 сделать текст мигающим, следует использовать ключевые кадры с применением правила @keyframes в комбинации со свойством opacity. Приведем пример:

CSS

Скопировать код

@keyframes blink {
  50% { opacity: 0; } // Текст то виден, то скрыт!
}

.blink-text {
  animation: blink 1s step-end infinite; // И эффект мигания циклически повторяется!
}

К текстовому элементу в вашем HTML применяйте класс .blink-text:

HTML

Скопировать код

<span class="blink-text">Я мигаю, значит, я существую!</span>

В результате текст будет мигать каждую секунду, создавая визуальный эффект включения и выключения.

Кинга Идем в IT: пошаговый план для смены профессии

Создадим плавное мигание

Для того чтобы сделать анимацию мигания более плавной и эффектной, воспользуйтесь свойством animation-timing-function со значением linear. Ключевое слово infinite позволит анимации бесконечно повторяться без использования JavaScript:

CSS

Скопировать код

@keyframes smooth-blink {
  50% { opacity: 0; } // Мигание выглядит стабильным и плавным!
}

.smooth-text {
  animation: smooth-blink 1s linear infinite; // Мягко мигаем на протяжении всей ночи
}

Это обеспечит равномерный переход между кадрами и добавит эффекту ощущение совершенства.

Совместимость с различными браузерами

Необходимо обеспечить доступность вашего мигающего текста для всех пользователей, независимо от их выбора браузера. Отображение на различных платформах можно наладить, добавив вендорные префиксы. Также можно организовать запасной вариант применения jQuery с методами .fadeOut().fadeIn(). Это будет идеальным решением для пользователей старых версий IE:

CSS

Скопировать код

/* CSS */
@-webkit-keyframes blink { /* Мигание для Safari и Chrome */
  50% { opacity: 0; }
}

@-moz-keyframes blink { /* Мигание для Firefox */
  50% { opacity: 0; }
}

@-ms-keyframes blink { /* Мигание для Internet Explorer */
  50% { opacity: 0; }
}

@-o-keyframes blink { /* Мигание для Opera */
  50% { opacity: 0; }
}

.compatible-blink-text {
  -webkit-animation: blink 1s linear infinite; /* Safari и Chrome готовы */
  -moz-animation: blink 1s linear infinite; /* Firefox присоединяется */
  -ms-animation: blink 1s linear infinite; /* IE вступает в игру */
  -o-animation: blink 1s linear infinite; /* Opera тоже в деле */
  animation: blink 1s linear infinite; // И мы готовы ко всему!
}

/* jQuery fallback */
$(document).ready(function() { // Подстрахуемся от старых браузеров
  function blink() {
    $('.compatible-blink-text').fadeOut(500).fadeIn(500, blink);
  }
  blink();
});

Визуализация

Как сделать текст мигающим или вспышкам подобным, как свет маяка 🚨 в ночи?

CSS

Скопировать код

@keyframes blink {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

.flash-text {
  animation: blink 1s linear infinite;
}

Теперь ваш текст (⚓️) мерцает в темноте:

Markdown

Скопировать код

Было: ⚓️ – "Тишина и спокойствие"
Стало: ⚓️🚨 – "Яркий мигающий маяк"

С помощью CSS3 ваш статичный текст трансформируется в мигающий фар:

Улучшение взаимодействия с пользователем

Проверьте, что мигающий текст выполняет конкретную функцию и не становится причиной раздражения для пользователей. Здесь приводятся некоторые рекомендации:

Мягкое привлечение внимания

Для значков уведомлений или информационных сообщений предпочтительно использовать более нежный мигающий эффект:

CSS

Скопировать код

@keyframes soft-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; } // Мигание выглядит ненавязчивым и понятным!
}

.notification {
  animation: soft-blink 2s linear infinite; // Видимость уведомлений не перегружает взгляд.
}

Подробнее об этом расскажет наш спикер на видео

Доступность — наша главная цель

Постоянное мигание может быть проблемой для людей с фоточувствительной эпилепсией. Предусмотрите возможность отключения или уменьшения интенсивности мигания:

HTML

Скопировать код

<button onclick="stopBlinking()">Нажми меня — и мигание исчезнет</button>

<script>
function stopBlinking() {
  document.querySelector('.blink-text').style.animation = 'none'; // Пора немного спокойствия
}
</script>

Создание визуальных акцентов с использованием цвета

Совместите смену цвета с изменением прозрачности, чтобы создать впечатляющий эффект, который привлекает внимание и сигнализирует о важном изменении статуса:

CSS

Скопировать код

@keyframes color-blink {
  0%, 100% { color: green; opacity: 1; } // Зеленый — всё под контролем
  50% { color: red; opacity: 0; } // Красный — требуется внимание!
}

.status-text {
  animation: color-blink 3s linear infinite; // Динамическая смена цвета во время мигания
}

Полезные материалы

Проверь как ты усвоил материалы статьи

Пройди тест и узнай насколько ты лучше других читателей

Какой CSS свойство используется для создания мигающего текста?

1 / 5

Свежие материалы

Как установить и настроить Swift на Linux

6 сентября 2024

Что такое домен и хостинг и зачем они нужны?

6 сентября 2024

Проверка юзабилити сайта: пошаговое руководство

6 сентября 2024