У вас еще нет динамического градиентного текста, попробуйте эти решения!

внешний интерфейс CSS
У вас еще нет динамического градиентного текста, попробуйте эти решения!

Это 11-й день моего участия в ноябрьском испытании обновлений. Узнайте подробности события:Вызов последнего обновления 2021 г.

Всем привет, я Пинеллиа 👴, программист скульптур из песка, который только начал писать. Если вам понравилась моя статья, вы можете подписаться на ➕ Нравится 👍 Добавьте меня в WeChat:frontendpicker, приглашаем вас присоединиться к группе, вместе изучать интерфейс и общаться, а также стать лучшим инженером ~ обратите внимание на общедоступный номер:передний конец пинеллии, Узнайте больше о интерфейсных знаниях!нажми на меняИсследуйте новые миры!

предисловие

Я сделал целую статью раньше, текстовый эффект:nuggets.capable/post/702895…

Не хватало гибкости, поэтому я придумал идею динамического текста, эту реализацию я обнаружил, что динамический текст — это действительно весело. Свойства CSS богаты, и один эффект часто представляет собой несколько решений.

canvas

в основном используютCanvasRenderingContext2D.createLinearGradient()метод достижения.CanvasRenderingContext2D.createLinearGradient()Главное — создать линейный градиент слева от параметра.

  1. Создать холст
<canvasid="gradient-text"></canvas>
  1. Создание 2D артбордов
 var gradientText= document.getElementById("gradient-text");
 var ctx = gradientText.getContext("2d");
  1. Создайте градиент, установите положение цвета градиента.
gradient.addColorStop("0", "#56ecc7");
gradient.addColorStop("0.5", "#9f5ad8");
gradient.addColorStop("1", "#56ecc7");
  1. заполнить текст
ctx.fillText("我是动态渐变的文字！", 0, 30);

image-20211111213109337

Способов использования канваса не так много, и он также относительно прост, но я думаю, что это не очень хорошо, то есть, если вы хотите добиться динамического градиентного текста, как показано на рисунке, это пустая трата производительности, поэтому это не рекомендуется.

background

Этот метод можно реализовать, установив линейный градиент, пока используется фон. Также используйте background-clip:text;, чтобы обрезать фон по цвету переднего плана текста.

  1. Установить градиент
     background: -webkit-linear-gradient(
          0deg,
          #56ecc7,
          #9f5ad8 25%,
          #56ecc7 50%,
          #9f5ad8 75%,
          #56ecc7
        );

  1. Обрезка градиентов

     -webkit-background-clip: text;

  2. Установите цвет текста на прозрачный, тогда вы сможете показать фон

    color: transparent;

    В этот момент цвет текста уже является градиентом.

    image-20211111215251008

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

@-webkit-keyframes gradient-text {
    0% {
        background-position: 0 ;
        }
    100% {
        background-position: 100% ;
        }
}

动态渐变文字

mask+attr

Эта реализация в основном использует attr. attr — это выражение CSS, которое в основном используется для получения значений атрибутов HTML. и для стайлинга. -webkit-mask уникален для браузеров ядра -webkit, он также может устанавливать градиенты.

Идея этого метода состоит в том, чтобы использовать псевдоэлементы для установки градиента на псевдоэлемент, затем охватывают псевдо-элемент над исходным текстом, что приводит к эффекту.

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

p {
    font-size: 80px;
    position: relative;
    color:#9f5ad8;
}

p::after {
    content: attr(data-text);
    color: #56ecc7;
    position: absolute;
    left: 0;
    z-index: 2;
    -webkit-mask: linear-gradient(to right, #56ecc7 10%, transparent );
    -webkit-mask-position: right;
}

image-20211111224544001

Точно так же этот метод также может устанавливать цвета динамического градиента. Изменяя положение цвета градиента, можно добиться динамического градиента текста. Например это:

image.png

Категории