Волшебное использование фона для достижения причудливых текстовых эффектов

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

В этой статье объясняется, как использоватьbackgroundАтрибуты серии, ловко реализующие некоторые причудливые текстовые эффекты. Благодаря этой статье вы узнаете:

  • пройти черезbackground-sizeа такжеbackground-positionДобейтесь классных эффектов подчеркивания текста
  • пройти черезbackground-sizeа такжеbackground-positionтак же какbackground-clipРеализация эффекта «слово за исчезновением»

причина

Мотивом для написания этой статьи было то, что однажды меня привлекло такое название —10 Masterfully Designed Websites, в котором перечислены 10 очень креативных веб-сайтов.

один изRed Bull RacingВеб-сайт является домашней страницей, на которой представлена ​​команда F1 Red Bull. Есть такой очень интересный эффект анимации Hover:

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

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

В этот момент я вспомнил в этой статье раньше -CSS оформление текста text-decoration & text-emphasis, тот, который я представилИмитация подчеркивания с фономЭффект.

Посмотрите на простой DEMO, используйтеbackgroundИмитация эффекта подчеркивания текста:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam</a>, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</p>

p {
    width: 600px;
    font-size: 24px;
    color: #666;
}
a {
    background: linear-gradient(90deg, #0cc, #0cc);
    background-size: 100% 3px;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    color: #0cc;
}

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

В качестве альтернативы используйтеbackgroundИмитация пунктирного подчеркивания:

a {
    background: linear-gradient(90deg, #0cc 50%, transparent 50%, transparent 1px);
    background-size: 10px 2px;
    background-repeat: repeat-x;
    background-position: 100% 100%;
}

Демонстрация CodePen — используйте фон для имитации подчеркивания и пунктирного подчеркивания

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

тонкое изменениеbackground-sizeа такжеbackground-positionРеализовать анимацию при наведении текста

Здесь, слегка изменивbackground-sizeа такжеbackground-positionСвойства, мы можем добиться некоторого очень интересного текстового кабеля.

Сначала посмотрите на такое демо, основной код работает<p>этикетка завернута<a>На этикетке:

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. <a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam</a>, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</p>

a {
    background: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff);
    background-size: 0 3px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: 1s all;
    color: #0cc;
}

a:hover {
    background-size: 100% 3px;
    color: #000;
}

Хотя мы установилиbackground: linear-gradient(90deg, #ff3c41, #fc0, #0ebeff), но изначально по умолчаниюbackground-size: 0 3px, то есть сначала не видно подчеркивания, при наведении меняетсяbackground-size: 100% 3px, на этот раз будет0 3pxприбыть100% 3pxТрансформация, то есть эффект растяжения с нуля.

Посмотрите на окончательный эффект:

из-за набораbackground-positionда0 100%, если установленоbackground-positionда100% 100%, мы можем получить обратный эффект:

// 其他都保持一致，只改变 background-position，从 0 100% 改为 100% 100%
a {
    ...
    background-position: 100% 100%;
    ...
}

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

CodePen Demo -- background underline animation

Хорошо, если мы используемbackgroundРеализуйте два перекрывающихся символа подчеркивания, а затем используйте два приведенных выше разных символа.background-positionзначение, мы можем получить более интересный эффект подчеркивания при наведении.

Схема кода CSS, обратите внимание на два подчеркивания, смоделированные фономbackground-positionЗначения не совпадают:

a {
    background: 
        linear-gradient(90deg, #0cc, #0cc),
        linear-gradient(90deg, #ff3c41, #fc0, #8500d8);
    background-size: 100% 3px, 0 3px;
    background-repeat: no-repeat;
    background-position: 100% 100%, 0 100%;
    transition: 0.5s all;
    color: #0cc;
}
a:hover {
    background-size: 0 3px, 100% 3px;
    color: #000;
}

У вас может получиться такой эффект, ведь при каждом наведении двигаются два подчёркивания:

CodePen Demo -- background underline animation

пройти черезbackground-sizeа такжеbackground-positionСотрудничатьbackground-clipРеализовать постепенное появление текста

Большинство приведенных выше абзацев вращаются вокруг --подчеркивать.

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

Вышеупомянутая техника используетbackground,ТакbackgroundМожет ли цвет фона изменить цвет текста? Ответ - да, только с помощьюbackground-clip.

Давайте немного изменим код, чтобы реализовать использованиеbackground-clipПри реализации зависания части текста постепенно меняет цвет:

<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. 
<a>Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, </a>
molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.
</p>

p {
    color: #666;
    cursor: pointer;
}

a {    
    background: linear-gradient(90deg, #fc0, #fc0);
    background-size: 0 100px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-clip: text;
    transition: .6s all linear;
}

p:hover a {
    background-size: 100% 100%;
    color: transparent;
}

Посмотрите на эффект,background-clip: textотсечение маски, мы будемbackground: linear-gradient(90deg, #fc0, #fc0)Роль цвета фона дает текст, при использованииcolor: transparentПусть текст показывает значение цвета фона:

CodePen Demo -- background-size, background-position и background-clip реализуют постепенное появление текста

Конечно, немного исказив приведенный выше код, мы можем развить несколько различных эффектов.

Исчезнуть для всего текста - от прозрачного для появления

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

<div class="button">Button</div>
<p><a>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</a></p>

a {    
    background: linear-gradient(90deg, #fc0, #fc0);
    background-size: 0 100px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    color: transparent;
    background-clip: text;
}
.button:hover ~ p a {
    transition: .8s all linear;
    background-size: 0 100px, 100% 100%;
}

Эффект следующий:

Затенить весь текст - от одного цвета к другому

Вы также можете изменить текст с одного цвета на другой по одному, просто добавьте еще один слойbackground-imageГрадиент.

<div class="button">Button</div>
<p><a>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</a></p>

a {    
    background: 
        linear-gradient(90deg, #999, #999),
        linear-gradient(90deg, #fc0, #fc0);
    background-size: 100% 100%, 0 100px;
    background-repeat: no-repeat;
    background-position: 100% 100%, 0 100%;
    color: transparent;
    background-clip: text;
}
.button:hover ~ p a {
    transition: .8s all linear;
    background-size: 0 100px, 100% 100%;
}

Здесь нужно пояснить, хотя настройкиcolor: transparent, но по умолчанию текст по-прежнему окрашен. Цвет текста по умолчанию задается первым слоем градиентаbackground: linear-gradient(90deg, #999, #999), linear-gradient(90deg, #fc0, #fc0), который является этим слоем:linear-gradient(90deg, #999, #999).

Когда срабатывает наведение,linear-gradient(90deg, #999, #999)Этот слой градиента постепенно исчезает, и постепенно появляется другой слой linear-gradient(90deg, #fc0, #fc0)` для достижения вышеуказанного эффекта.

CodePen -- эффект затухания текста фонового клипа

Простое моделирование эффекта карты заголовков

Здесь мы используем эту простую технику, смоделируя, какой эффект начала GIF статьи, перечисленные ниже:

Техника оригинального автора этого эффекта такова:

  1. относиться к каждому слову как к объекту, обернутому в специальный класс
  2. использоватьanimation-delayПостепенно давайте анимацию каждому слову

Здесь мы равномерно обработаем весь текст и восстановим его просто:

<div class="button">Button</div>
<p><a>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia nostrum placeat consequatur deserunt velit ducimus possimus commodi temporibus debitis quam, molestiae laboriosam sit repellendus sed sapiente quidem quod accusantium vero.</a></p>

/** 动画核心 background、line-height、opacity **/
a {    
    background: 
        linear-gradient(90deg, #ff5722, #ff5722),
        linear-gradient(90deg, #aaa, #aaa);
    background-size: 100% 100%, 0 100px;
    background-repeat: no-repeat;
    background-position: 100% 100%, 0 100%;
    cursor: pointer;
    color: transparent;
    background-clip: text;
    line-height: 3;
    opacity: 0;
}
.button:hover ~ p a {
    transition: 1.2s background .3s ease-out, .8s line-height ease-out, .6s opacity ease-in;
    background-size: 0 100px, 100% 100%;
    color: transparent;
    line-height: 1;
    opacity: 1;
}
/ ** 简单控制半透明黑色遮罩出现 **/
a::before {
    content: "";
    position: fixed;
    background: rgba(0, 0, 0, .8);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    transition: .3s all linear;
    opacity: 0;
}
.button:hover ~ p a::before {
    opacity: 1;
}

Эффект следующий:

Видно, как идет общий контроль над всем текстом, а не слово за словом, хороший эффект контроля, но плюсом является очень малое количество кода. Для некоторых простых сценариев достаточен класс карты наведения.

background-image, background-clip для достижения эффекта затухания текста

Идеально восстановить эффект титульного изображения

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

Здесь нам нужно уточнить каждое слово и сделать дополнительную анимацию, используя псевдоэлементы для каждого слова.

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

<div class="button">Button</div>
<div class="g-wrap"></div>
<p>
    <span data-text="Lorem">Lorem</span> 
    <span data-text="ipsum">ipsum</span> 
    <span data-text="dolor">dolor</span> 
    <span data-text="sit">sit</span> 
    <span data-text="amet">amet</span> 
    // ... 类似结构     
</p>

Как вы можете видеть, каждое слово<span>Пакет и добавленныйdata-text, что удобно псевдоэлементам для получения текущего слова.

Далее стоит оживить и дать каждому<span>добавить соответствующий инкрементныйanimation-delayДля того, чтобы добиться разницы каждой анимации слова. Основной псевдокод выглядит следующим образом:

p {
    position: relative;
    width: 500px;
    overflow: hidden;
}

p span {
    position: relative;
    display: inline-block;
    opacity: 0;
    transform: translateY(15px) translateZ(0);
    transition-property: transform, opacity;
    transition-duration: .3s, .2s;
}

.button:hover ~ p span {
    opacity: 1;
    color: #ddd;
    transform: translateY(0) translateZ(0);
    transition-duration: 1s, .2s;
}

p span:after,
p span:before {
    position: absolute;
    content: attr(data-text);
    top: 0;
    left: 0;
    z-index: 1;
    transform: translateZ(0);
}

p span:after {
    color: #e62541;
    transition-property: opacity;
    transition-duration: .1s;
}

.button:hover ~ p span:after {
    opacity: 0;
    transition-property: opacity;
    transition-duration: .4s;
}

@for $i from 1 to 21 {
    p span:nth-child(#{$i}) {
        transition-delay: #{$i * 0.04}s;
        
        &::after {
            transition-delay: #{$i * 0.04 + 0.2}s;
        }
    }
}

На самом деле сама анимация не слишком сложная, есть два основных момента:

  1. состояние наведения и состояние без наведенияtransition-durationотличается тем, что в процессе отмены наведения время процесса исчезновения анимации обычно меньше;
  2. Цикл с SASS@for $i from 1 to 21 {}приращение для каждогоspanи его псевдоэлементы добавляют инкрементныеtransition-delay;

В итоге мы можем получить следующие результаты:

Полный код, можете ткнуть --Вдохновение CSS — используйте задержку анимации для достижения эффекта затухания текста

наконец

Ну вот и конец этой статьи, надеюсь она вам поможет :)

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

Другие замечательные эффекты CSS могут следовать за мнойCSS-вдохновение

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

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

Категории