17.07.2023 в 15:11

Создайте эффект печатной машинки с помощью TailwindCSS за 5 минут

Анимация печатной машинки часто выполняется с помощью Javascript. Но мы можем легко добиться такой анимации с помощью TailwindCSS.

Простая пишущая машинка

Tailwind Play: https://play.tailwindcss.com/17LendGXa0

CSS

<h1 class="relative w-[max-content] font-mono
before:absolute before:inset-0 before:bg-white
before:animate-typewriter
">Hello World</h1>

Этот фрагмент кода генерирует печатную машинку. Не забудьте добавить анимацию печатной машинки ниже!

Чтобы все работало правильно, сделайте цвет фона псевдоэлемента "before" цветом фона за ним.

Поскольку сначала текст должен быть невидимым, h1 закрывается псевдоэлементом 'before'. С помощью анимации текст раскрывается шаг за шагом. Чтобы ничего не перепутать при раскрытии текста, необходимо использовать шрифт Monospace.

Конфигурация TailwindCSS (tailwind.config.js)

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        typewriter: "typewriter 2s steps(11) forwards"
      },
      keyframes: {
        typewriter: {
          to: {
            left: "100%"
          }
        }
      }
    },
  },
  plugins: [],
}

В файле tailwind.config.js мы добавляем анимацию печатной машинки. Не стесняйтесь изменять длительность; я выбрал 2 секунды.

Достаточно изменить значение 'steps(n)', где 'n' - это количество букв (включая пробелы!).

Поскольку "Hello World" состоит из 11 букв, я написал steps(11).

Добавление символа каретки

(да, мигающая вертикальная линия называется кареткой)

Tailwind Play: https://play.tailwindcss.com/FSWpXQA9Dg

CSS

<h1 class="relative w-[max-content] font-mono
before:absolute before:inset-0 before:animate-typewriter
before:bg-white
after:absolute after:inset-0 after:w-[0.125em] after:animate-caret
after:bg-black">Hello World</h1>

Каретка является псевдоэлементом "after". Во время написания текста она не мигает, как настоящая каретка.

Конфигурация TailwindCSS (tailwind.config.js)

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        typewriter: 'typewriter 2s steps(11) forwards',
        caret: 'typewriter 2s steps(11) forwards, blink 1s steps(11) infinite 2s',
      },
      keyframes: {
        typewriter: {
          to: {
            left: '100%',
          },
        },
        blink: {
          '0%': {
            opacity: '0',
          },
          '0.1%': {
            opacity: '1',
          },
          '50%': {
            opacity: '1',
          },
          '50.1%': {
            opacity: '0',
          },
          '100%': {
            opacity: '0',
          },
        },
      },
    },
  },
  plugins: [],
}

В файле tailwind.config.js мы добавляем ключевые кадры мигания и анимацию каретки.

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

Надеюсь, это было полезно!

Источник:

#CSS

164

Войти на сайт

Создайте эффект печатной машинки с помощью TailwindCSS за 5 минут

Источник: