Причудливая анимация текста CSS

Ранее были две статьи о шрифтах, посвященные тому, как определять шрифты:

Шрифты, которые вы должны знать о семействе шрифтов
Новый взгляд на семейство шрифтов для веб-шрифтов

Эта статья будет объединена с этой --CSS причудливая анимация границпохоже, скажи что-нибудьТекстовый эффект, используя различные атрибуты для достижения различных эффектов текстовой анимации.

Google Font

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

этоGoogle FontНа этом веб-сайте есть много разных шрифтов с открытым исходным кодом:

Это также обеспечивает очень быстрый и удобный способ импорта, когда мы остановились на шрифте, который нам нравится. Выберите соответствующий шрифт, выберите+Select this style, вы можете пройтиlinkи@importВводится двумя способами:

использоватьlinkВведение этикетки:

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200&display=swap" rel="stylesheet">

ИЛИ, в коде CSS используйте@importВводить:

<style>
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@200&display=swap');
</style>

Вышеупомянутые два метода фактически используются внутренне@font-faceПроведено определение шрифта.

мы можем пройти@font-faceБыстрое объявление указывает пользовательский шрифт. Что-то вроде этого:

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

Таким образом, используя Google Font, мы можем легко пользоваться различными шрифтами.

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

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

текст и тень

Комбинируя шрифты с затенением шрифтаtext-shadow, В сочетании различные способы использования теней будут давать разные эффекты.

Давайте рассмотрим серию демонстраций.

Текстовый эффект длинной тени

Длинные тени можно создать с помощью нескольких слоев изменения теней с постепенно меняющимися цветами (прозрачными):

div {
  text-shadow: 0px 0px #992400, 1px 1px rgba(152, 36, 1, 0.98), 2px 2px rgba(151, 37, 2, 0.96), 3px 3px rgba(151, 37, 2, 0.94), 4px 4px rgba(150, 37, 3, 0.92), 5px 5px rgba(149, 38, 4, 0.9), 6px 6px rgba(148, 38, 5, 0.88), 7px 7px rgba(148, 39, 5, 0.86), 8px 8px rgba(147, 39, 6, 0.84), 9px 9px rgba(146, 39, 7, 0.82), 10px 10px rgba(145, 40, 8, 0.8), 11px 11px rgba(145, 40, 8, 0.78), 12px 12px rgba(144, 41, 9, 0.76), 13px 13px rgba(143, 41, 10, 0.74), 14px 14px rgba(142, 41, 11, 0.72), 15px 15px rgba(142, 42, 11, 0.7), 16px 16px rgba(141, 42, 12, 0.68), 17px 17px rgba(140, 43, 13, 0.66), 18px 18px rgba(139, 43, 14, 0.64), 19px 19px rgba(138, 43, 15, 0.62), 20px 20px rgba(138, 44, 15, 0.6), 21px 21px rgba(137, 44, 16, 0.58), 22px 22px rgba(136, 45, 17, 0.56), 23px 23px rgba(135, 45, 18, 0.54), 24px 24px rgba(135, 45, 18, 0.52), 25px 25px rgba(134, 46, 19, 0.5), 26px 26px rgba(133, 46, 20, 0.48), 27px 27px rgba(132, 47, 21, 0.46), 28px 28px rgba(132, 47, 21, 0.44), 29px 29px rgba(131, 48, 22, 0.42), 30px 30px rgba(130, 48, 23, 0.4), 31px 31px rgba(129, 48, 24, 0.38), 32px 32px rgba(129, 49, 24, 0.36), 33px 33px rgba(128, 49, 25, 0.34), 34px 34px rgba(127, 50, 26, 0.32), 35px 35px rgba(126, 50, 27, 0.3), 36px 36px rgba(125, 50, 28, 0.28), 37px 37px rgba(125, 51, 28, 0.26), 38px 38px rgba(124, 51, 29, 0.24), 39px 39px rgba(123, 52, 30, 0.22), 40px 40px rgba(122, 52, 31, 0.2), 41px 41px rgba(122, 52, 31, 0.18), 42px 42px rgba(121, 53, 32, 0.16), 43px 43px rgba(120, 53, 33, 0.14), 44px 44px rgba(119, 54, 34, 0.12), 45px 45px rgba(119, 54, 34, 0.1), 46px 46px rgba(118, 54, 35, 0.08), 47px 47px rgba(117, 55, 36, 0.06), 48px 48px rgba(116, 55, 37, 0.04), 49px 49px rgba(116, 56, 37, 0.02), 50px 50px rgba(115, 56, 38, 0);
}

Конечно, нам сложно вручную написать несколько теней и каждый цвет по одному, при написании длинных теней нам обычно нужна помощь.SASS,LESSЧтобы помочь сэкономить время:

@function makelongrightshadow($color) {
    $val: 0px 0px $color;

    @for $i from 1 through 50 {
        $color: fade-out(desaturate($color, 1%), .02);
        $val: #{$val}, #{$i}px #{$i}px #{$color};
    }

    @return $val;
}
div {
    text-shadow: makeLongShadow(hsl(14, 100%, 30%));
}

Текстовый эффект трехмерной тени

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

div {
  text-shadow: 0 -1px 0 #ffffff, 0 1px 0 #2e2e2e, 0 2px 0 #2c2c2c, 0 3px 0 #2a2a2a, 0 4px 0 #282828, 0 5px 0 #262626, 0 6px 0 #242424, 0 7px 0 #222222, 0 8px 0 #202020, 0 9px 0 #1e1e1e, 0 10px 0 #1c1c1c, 0 11px 0 #1a1a1a, 0 12px 0 #181818, 0 13px 0 #161616, 0 14px 0 #141414, 0 15px 0 #121212);
}

Текстовый эффект встроенной тени

Разумное сочетание цвета тени и цвета фона может привести к созданию тени, похожей на встроенный эффект.

div {
  color: #202020;
  background-color: #2d2d2d;
  letter-spacing: .1em;
  text-shadow: -1px -1px 1px #111111, 2px 2px 1px #363636;
}

CodePen Demo -- 5 text shadow effects in css3

Эффект неонового света (неон)

Эффект неонового света, который на английском называется Neon, является одним из самых популярных эффектов, которые я видел на Codepen. Его принцип очень прост, но он может создавать очень крутые эффекты.

Нам нужно только установить 3 ~ n слоев эффекта тени, радиус размытия каждого слоя (третий параметр тени текста) большой, а цвет тени каждого слоя одинаков.

p {
    color: #fff;
    text-shadow: 
        0 0 10px #0ebeff,
        0 0 20px #0ebeff,
        0 0 50px #0ebeff,
        0 0 100px #0ebeff,
        0 0 200px #0ebeff
}

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

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

p {
    transition: .2s;
 
    &:hover {
        text-shadow: 0 0 10px #0ebeff, 0 0 20px #0ebeff, 0 0 50px #0ebeff, 0 0 100px #0ebeff, 0 0 200px #0ebeff;
    }
}

CodePen Demo -- Neon Demo

На CodePen есть демо с 2K+ лайками, в котором достигается очень хороший неоновый эффект, можете ткнуть и посмотретьCodePen -- Neon Glow.

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

<p>
  <span id="n">n</span>
  <span id="e">e</span>
  <span id="o">o</span>
  <span id="n2">n</span>
</p>

p:hover span {
  animation: flicker 1s linear forwards;
}
p:hover #e {
  animation-delay: .2s;
}
p:hover #o {
  animation-delay: .5s;
}
p:hover #n2 {
  animation-delay: .6s;
}

@keyframes flicker {
  0% {
    color: #333;
  }
  5%, 15%, 25%, 30%, 100% {
    color: #fff;
    text-shadow: 
      0px 0px 5px var(--color),
      0px 0px 10px var(--color),
      0px 0px 20px var(--color),
      0px 0px 50px var(--color);
      
  }
  10%, 20% {
    color: #333;
    text-shadow: none;
  }
}

Частота кадров изображения GIF недостаточна, а эффект не очень хорош, вы можете нажать на следующую ДЕМО, чтобы почувствовать это:

CodePen Demo -- Neon Demo

текст и фон

Фоновый фон в CSS также предоставляет некоторые свойства для усиления эффекта текста.

фон-клип с текстом

В фоновом режиме есть атрибутbackground-clip, его эффектУстанавливает правило заливки для фона элемента (фоновое изображение или цвет).

иbox-sizingЗначения очень похожи, вообще говоря, у него 3 значения,border-box,padding-box,content-box, последняя спецификация добавляет новыйbackground-clip. Сегодня некоторым браузерам по-прежнему необходимо добавлять префикс webkit для использования-webkit-background-clip.

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

Взгляните на самую простую демонстрацию, не используя ееbackground-clip:text :

<div>Clip</div>

<style>
div {
  font-size: 180px;
  font-weight: bold;
  color: deeppink;
  background: url($img) no-repeat center center;
  background-size: cover;
}
</style>

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

CodePen Demo

использовать`background-clip:text`

Давайте немного изменим приведенный выше код и добавим-webkit-background-clip:text:

div {
  font-size: 180px;
  font-weight: bold;
  color: deeppink;
  background: url($img) no-repeat center center;
  background-size: cover;
  background-clip: text;
}

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

CodePen Demo

Увидев это, некоторые люди могут задаться вопросом, это не настройка текста.colorимущество.

Не волнуйтесь, так как текст имеет цвет, он закрывает фон блока div Что делать, если текст настроен прозрачным? Текст можно сделать прозрачнымcolor: transparent.

div {
  color: transparent;
  background-clip: text;
}

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

CodePen Demo

Если сделать текст прозрачным, фон исходного элемента div становится видимым, а вся область за пределами текста обрезается.background-clip:textэффект.

использовать`background-clip`Графическое и текстовое словосочетание

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

CodePen Demo -- background-clip: text & Image text

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

использовать`background-clip`Реализовать градиентный текст

Кроме того, используя это свойство, вы также можете легко реализовать градиентный текст:

{
    background: linear-gradient(45deg, #009688, yellowgreen, pink, #03a9f4, #9c27b0, #8bc34a);
    background-clip: text;
}

Сотрудничатьbackground-positionилиfilter: hue-rotate(), чтобы анимировать градиент:

{
    background: linear-gradient(45deg, #009688, yellowgreen, pink, #03a9f4, #9c27b0, #8bc34a);
    background-clip: text;
    animation: huerotate 5s infinite;
}

@keyframes huerotate {
    100% {
        filter: hue-rotate(360deg);
    }
}

CodePen Demo -- background-clip: цвет градиента текста

использовать`background-clip`Добавить анимацию выделения в текст

использоватьbackground-clip, мы также можем легко добавить анимацию подсветки к тексту.

Например:

Его суть также используетсяbackground-clip, псевдокод выглядит следующим образом:

<p data-text="Lorem ipsum dolor"> Lorem ipsum dolor </p>

p {
    position: relative;
    color: transparent;
    background-color: #E8A95B;
    background-clip: text;
}
p::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(120deg, transparent 0%, transparent 6rem, white 11rem, transparent 11.15rem, transparent 15rem, rgba(255, 255, 255, 0.3) 20rem, transparent 25rem, transparent 27rem, rgba(255, 255, 255, 0.6) 32rem, white 33rem, rgba(255, 255, 255, 0.3) 33.15rem, transparent 38rem, transparent 40rem, rgba(255, 255, 255, 0.3) 45rem, transparent 50rem, transparent 100%);
    background-clip: text;
    background-size: 150% 100%;
    background-repeat: no-repeat;
    animation: shine 5s infinite linear;
}
@keyframes shine {
	0% {
		background-position: 50% 0;
	}
	100% {
		background-position: -190% 0;
	}
}

удалить псевдоэлементыbackground-clip: text, можно понять принцип:

CodePen Demo -- shine Text && background-clip

`mask`с текстом

Существует также свойство, связанное с фоном --mask.

упоминалось в нескольких предыдущих статьяхmask, более подробный -Фантастическая МАСКА CSS, эта статья не слишком много объясняет об основных понятиях масок.Если вы читаете вниз, если вы запутались в использовании некоторых масок, вы можете вернуться к ним снова.

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

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

<div>
    <p>Hello MASK</p>
</div>

Основной код CSS:

div {
    mask: radial-gradient(circle at 50% 0%, #000, transparent 30%);
    animation: scale 6s infinite;
}
@keyframes scale {
    0% {
        mask-size: 100% 100%;
    }
    60%,
    100% {
        mask-size: 150% 800%;
    }
}

Измените разные направления, или это:

CodePen Demo -- MASK Text Effect

Текст и режим наложения (mix-blend-mode) и фильтр (filter)

Далее идут очень интересные режимы наложения и фильтры. Эти два свойства делают мир CSS очень интересным, и если вы активно их используете, вы вздохнете, насколько мощный и замечательный CSS.

Было много статей орежим смешиванияифильтрВ статье какое-то основное использование не буду вдаваться в подробности.

Добавьте границы к тексту, чтобы создать пустой текст

В CSS мы можем использовать-webkit-text-stroke, чтобы быстро добавить границу к тексту, используя это, вы можете быстро создать пустой текст:

p {
    -webkit-text-stroke: 3px #373750;
}

Конечно, мы видим, что используемые свойства-webkit-text-strokeпринесwebkitпрефикс, есть определенные проблемы с совместимостью.

Итак, ранее мы также использовали быtext-shadow, который генерирует пустой текст.

p {
    text-shadow: 0 0 5px #fff;
}

Видно, что из-за использования тени возникает четкое ощущение размытия и есть определенные недостатки.

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

p {
    position: relative;
    color: #fff;

    &::after {
        content: 'Magic Text';
        position: absolute;
        left: 0;
        top: 0;
        color: #fff;
        mix-blend-mode: difference;
        filter: blur(1px);
    }
}

Используйте здесьfilter: blur(1px)Создается шрифт немного большего размера, чем исходный шрифт, и он накладывается на исходный шрифт, а затем используется повторно.mix-blend-mode: differenceЧасти одного цвета удаляются, остается только часть, добавленная фильтром размытия.

mix-blend-mode: difference: Режим разности (Difference), функция заключается в просмотре информации о цвете в каждом канале, сравнении цвета фона и цвета рисунка и вычитании значения более темного пикселя из значения пикселя более яркого пикселя. Смешивание с белым инвертирует основной цвет, смешивание с черным не меняет.

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

CodePen Demo -- Hollow TEXT EFFECT

Используйте режимы наложения для создания текста с градиентным вырезом

Хорошо, вернемся к вышесказанному-webkit-text-stroke, после получения пустого текста мы также можем использовать режим наложенияmix-blend-mode: multiplyСоздание градиентного текста.

mix-blend-mode: multiply: Умножьте, умножьте значения пикселей двух цветов, а затем разделите на 255. Результатом является значение пикселей конечного цвета. Обычно цвет после выполнения режима Multiply темнее исходных двух цветов. Умножение любого цвета на черный все равно даст черный цвет, выполнение умножения на любой цвет и белый сохранит исходный цвет неизменным, а выполнение этого режима с другими цветами даст эффект освещения этим цветом в темной комнате.

p {
    position: relative;
    -webkit-text-stroke: 3px #9a9acc;

    &::before{
		content: ' ';
		width: 100%;
		height: 100%;
		position: absolute;
		left: 0;
		top: 0;
		background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00);
		mix-blend-mode: multiply;
	}
}

это здесь,mix-blend-mode: multiplyФункция очень похожа на маску, мы фактически генерируем шаблон градиента, но только в пределах контура текста будет проявляться цвет градиента.

Конечно, вышеперечисленные эффекты также связаны с общим черным фоном.

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

CodePen Demo -- Hollow TEXT EFFECT

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

ОК, на основании вышесказанного мы можем продолжить наложение режимов наложения, на этот раз мы используем оставшийся::afterПсевдокласс, добавьте еще одинmix-blend-mode: color-dodgeРежим наложения, добавьте последний штрих к тексту и добейтесь прекрасного эффекта света и тени.

mix-blend-mode: color-dodge: режим Color Dodge, проверьте информацию о цвете каждого канала, уменьшив «контраст», чтобы сделать цвет основного цвета ярче, чтобы отразить цвет рисунка, а смешивание с черным не изменилось. .

Основной псевдокод:

p {
    position: relative;
    -webkit-text-stroke: 3px #7272a5;

    &::before {
		content: ' ';
		background-image: linear-gradient(45deg, #ff269b, #2ab5f5, #ffbf00);
		mix-blend-mode: multiply;
    }

    &::after {
        content: "";
        position: absolute;
        background: radial-gradient(circle, #fff, #000 50%);
        background-size: 25% 25%;
        mix-blend-mode: color-dodge;
        animation: mix 8s linear infinite;
    }
}

@keyframes mix {
    to {
        transform: translate(50%, 50%);
    }
}

Взгляните на эффект:

здесь, чтобы вздохнутьmix-blend-mode: color-dodgeМагия, уберите этот режим наложения, на самом деле он такой:

CodePen -- Hollow TEXT EFFECT

Хорошо, с вышеуказанным эффектом, мы можем продолжить? Ответ положительный. Из-за нехватки места в этой статье мы не будем углубляться в этот эффект, и те, кто заинтересован, могут сами поиграть с приведенным выше DEMO.

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

все еще использую здесьmix-blend-mode: differenceРазностный режим для достижения эффекта заголовка, в котором цвет текста и фона меняется местами.

mix-blend-mode: difference: Режим разности (Difference), функция заключается в просмотре информации о цвете в каждом канале, сравнении цвета фона и цвета рисунка и вычитании значения более темного пикселя из значения пикселя более яркого пикселя. Смешивание с белым инвертирует основной цвет, смешивание с черным не меняет.

Код очень простой, реализуем черно-белый фон, цвет текста белый, а при режиме верхней разности текст на черном фоне белый, а текст на белом фоне черный.

p  {
    background: repeating-radial-gradient(circle at 200% 200%, #000 0, #000 150px, #fff 150px, #fff 300px);

    &::before {
        content: "LOREM IPSUM";
        color: #fff;
        mix-blend-mode: difference;
    }
}

Может использоваться для некоторых эффектов заголовка:

CodePen Demo -- Radial-gradient + Mix-blend-mode

Динамический эффект Glitch, похожий на вибрато, с режимами наложения

Хорошо, теперь давайте попробуем другие режимы наложения. существуетГлюк-арт CSSВ одной статье упоминается глитч-арт.

Что такое глитч-арт? Всем известный Douyin LOGO — одно из проявлений глитч-арта. Он имеет волшебное ощущение и выглядит как мерцающий, вибрирующий эффект, который бросается в глаза.

ключевой момент

Используйте mix-blend-mode: осветлите режим наложения, чтобы сделать перекрывающуюся часть двух текстовых структур белой.
Используйте смещение элемента, чтобы завершить анимацию движения дислокации, чтобы создать визуальный эффект удара

Взгляните на эффект:

Длина этой статьи немного велика, и кода в ней нет.Полное DEMO находится здесь:

Douyin-подобный текстовый эффект сбоя LOGO

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

ключевой момент

Использование псевдоэлементов для создания двух копий текста
Визуальные эффекты выполняются с помощью смещения, маскирования, режимов наложения.
Цветовое соответствие соответствует стилю Douyin LOGO.

Полная ДЕМО здесь:

Текстовый эффект сбоя CSS

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

Эффект 404 в стиле Glitch Art

Слегка замените текстовую копию на 404 и добавьте несколько эффектов фильтра (hue-rotate(),blur()) хе-хе, нашел сценарий, который действительно может работать:

Эффект первый:

404

Эффект второй:

404

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

CodePen — эффект глюка CSS 404
CodePen -- эффект глюка 404

Маленькая хитрость, при использовании режима наложения иногда эффект не хочет смешиваться с фоном, можно использоватьisolation: isolateизолировать.

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

существуетХитрости и детали CSS-фильтров, о которых вы не зналиВ этой статье представлен эффект слияния, достигаемый с помощью фильтров.

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

Выньте два фильтра отдельно, и их функции:

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

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

CodePen Demo -- filter mix between blur and contrast

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

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

Вы можете увидеть конкретную реализацию здесь:

CodePen Demo -- word animation | word filter

Текст и SVG

Наконец, давайте посмотрим на текст и SVG.

В комбинации SVG и CSS есть класс атрибутов, очень подходящих для анимации, то естьstroke-*Есть несколько связанных свойств, используя их, нам нужно только освоить простой синтаксис SVG, чтобы быстро создавать связанные линейные анимации.

Мы используем несколько атрибутов, связанных с границами и линиями в SVG, чтобы реализовать линейную анимацию текста, Перечисленные ниже, на самом деле, большинство из них очень легко понять по сравнению с CSS, но название изменено:

ширина штриха: аналогично ширине границы в css, установите ширину границы для графики svg;
штрих: аналогично цвету границы в css, установите цвет границы для графики svg;
stroke-linejoin | stroke-linecap: установить стиль соединения отрезка линии;
stroke-dasharray: значение представляет собой набор массивов без верхнего предела, каждое число попеременно представляет ширину штриха и пробела;
stroke-dashoffset: смещение пунктирной линии

Для более подробного ознакомления вы можете увидеть это:[Веб-анимация] Введение в линейную анимацию SVG

Анимация строкового текста

Далее мы используемstroke-*Связанные свойства для реализации простой анимации строкового текста.

<svg viewBox="0 0 400 200">
	<text x="0" y="70%"> Lorem </text>
</svg>

svg text {
	animation: stroke 5s infinite alternate;
	letter-spacing: 10px;
	font-size: 150px;
}
@keyframes stroke {
	0% {
		fill: rgba(72, 138, 20, 0);
		stroke: rgba(54, 95, 160, 1);
		stroke-dashoffset: 25%;
		stroke-dasharray: 0 50%;
		stroke-width: 1;
	}
	70% {
		fill: rgba(72, 138, 20, 0);
		stroke: rgba(54, 95, 160, 1);
		stroke-width: 3;
	}
	90%,
	100% {
		fill: rgba(72, 138, 204, 1);
		stroke: rgba(54, 95, 160, 0);
		stroke-dashoffset: -25%;
		stroke-dasharray: 50% 0;
		stroke-width: 0;
	}
}

Суть анимации заключается в использовании динамически изменяющегося текста дляstroke-dasharrayиstroke-dashoffsetФормируется трансформация визуальной линии, а в конце анимации текст раскрашивается. Взгляните на эффект:

CodePen Demo -- SVG Text Line Effect

Наконец

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

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

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

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

Google Font

текст и тень

Текстовый эффект длинной тени

Текстовый эффект трехмерной тени

Текстовый эффект встроенной тени

Эффект неонового света (неон)

текст и фон

фон-клип с текстом

использоватьbackground-clip:text

использоватьbackground-clipГрафическое и текстовое словосочетание

использоватьbackground-clipРеализовать градиентный текст

использоватьbackground-clipДобавить анимацию выделения в текст

maskс текстом

Текст и режим наложения (mix-blend-mode) и фильтр (filter)

Добавьте границы к тексту, чтобы создать пустой текст

Используйте режимы наложения для создания текста с градиентным вырезом

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

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

Динамический эффект Glitch, похожий на вибрато, с режимами наложения

ключевой момент

ключевой момент

Эффект 404 в стиле Glitch Art

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

Текст и SVG

Анимация строкового текста

Наконец

использовать`background-clip:text`

использовать`background-clip`Графическое и текстовое словосочетание

использовать`background-clip`Реализовать градиентный текст

использовать`background-clip`Добавить анимацию выделения в текст

`mask`с текстом