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

внешний интерфейс JavaScript CSS
Интеллектуальное использование фильтров для достижения высокоуровневого эффекта переключения текстовой вспышки

Сегодня наткнулся на такую ​​штуку, очень интересноТекстовая флеш-анимация:

Если этот тип эффекта переключения текстовой вспышки используется правильно, он может лучше привлечь внимание пользователя.

Конечно, сегодня речь не идет об использовании CSS для достижения вышеуказанных эффектов. В процессе попыток я нашел еще один класс, который можно очень легко реализовать с помощью CSS.Текстовая флеш-анимация, использовалblur()фильтры иcontrast()Эффект слияния, создаваемый фильтром, подобен этому:

Этот трюк также упоминается во многих статьях, и в этой статье он будет кратко описан.

Фильтр размытия смешивает контрастный фильтр для создания эффекта смешивания.

В центре внимания этой статьи,Фильтр размытия, наложенный на контрастный фильтр, создает эффект слияния.. Выньте два фильтра отдельно, и их функции:

  1. filter: blur(): установка эффекта размытия по Гауссу на изображении.
  2. filter: contrast(): регулировка контрастности изображения.

Однако, когда они «подходят», происходит чудесное явление слияния.

Начнем с простого примера:

CodePen Demo -- filter mix between blur and contrast

Посмотрите внимательно на процесс пересечения двух кругов.При соприкосновении края с краем будет производиться эффект слияния границ.Размытый край размытия по Гауссу устраняется через контрастный фильтр, а размытие по Гауссу используется для достижения эффекта слияния.

Реализация вышеуказанного эффекта основана на двух моментах:

  1. График устанавливаетсяfilter: contrast()анимация на фоне холста
  2. Установлена ​​анимированная графикаfilter: blur()(Родительский элемент анимируемого изображения должен быть установленfilter: contrast()холст)

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

Используйте фильтр размытия/контрастности для переключения текста

Используя описанные выше методы, мы можем добиться эффекта слияния текста, например:

CodePen Demo -- word animation | word filter

Таким образом, используйте этот трюк, мы можем рассмотреть анимацию:

  1. Несколько слов появляются последовательно (использованиеanimation-delayконтрольная обработка)
  2. Когда предыдущий текст исчезает, появляется следующий текст
  3. Добавьте вышеуказанные фильтры

Основной код выглядит следующим образом:

<div class="g-container">
  <div class="word">iPhone</div>
  <div class="word">13</div>
  <div class="word">Pro</div>
  <div class="word">强得很！</div>
</div>

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

$speed: 8s;
$wordCount: 4;

.g-container {
    position: relative;
    width: 100vw;
    height: 100vh;
    background: #000;
    font-family: 'Montserrat', sans-serif;
    color: #fff;
    font-size: 120px;
    filter: contrast(15);
}
.word {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: change $speed infinite ease-in-out;

    @for $i from 0 to $wordCount {
        &:nth-child(#{$i + 1}) {
            animation-delay: ($speed / ($wordCount + 1) * $i) - $speed;
        }
    }
}

@keyframes change {
    0%,
    5%,
    100% {
        filter: blur(0px);
        opacity: 1;
    }
    50%,
    80% {
        filter: blur(80px);
        opacity: 0;
    }
}

Весь код, ядро ​​требует внимания@keyframes changeЭту анимацию, мы последовательно добавляем эту анимацию к тексту (то есть с помощьюanimation-delayПоследовательное добавление задержек) Реализовать процесс исчезновения следующего текста.

вышеупомянутый.g-containerДобавил эту строку кода --filter: contrast(15), уберите это предложение, эффект такой:

Добавьте этот код ключа --filter: contrast(15), весь эффект показан на заглавной картинке в начале:

Демо-версия CodePen — чистый CSS для достижения эффекта переключения флэш-памяти при слиянии текста

Два основных ключевых момента всей анимации:

  1. воспользовалсяblurсмесь фильтровcontrastФильтры создают эффект слияния
  2. В процессе исчезновения предыдущего текста отображается следующий текст, чтобы создать эффект, что текущий отображаемый текст развивается из предыдущего текста.

Отсюда можно управлять количеством текста через HTML, менять продолжительность анимации в переменной SASS$speedи количество текста$wordCountи наконец@keyframes changeПараметры внутри, постоянно регулируйте и оптимизируйте эффект, который вы хотите. Разработаны различные эффекты мигания текста.

Наконец

Хорошо, это конец этой статьи, я надеюсь, что эта статья поможет вам :)

Если вы хотите получить самую интересную информацию о CSS, не пропустите мой официальный аккаунт --Интересные факты о внешнем интерфейсе iCSS😄

Другие замечательные технические статьи по CSS собраны в моемGithub -- iCSS, продолжайте обновлять, добро пожаловать, нажмите звездочку, чтобы подписаться на коллекцию.

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

Категории