Анимация размытия Tailwindcss

Как сделать пользовательскую анимацию с помощью размытия при попутном ветре

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {
      keyframes: {
        blur: {
          '0%': {filter: blur(2px)} ,
          '100%': {filter: blur(3px)},
        },
      },
      animation: {
        'blur': 'blur 2s linear ',
      },
    },
  },
  plugins: [],
}

Это не работает для меня.

Я хочу сделать анимацию всплывающего окна с размытием

Это решило вашу проблему? :)

— 16.12.2022 00:39

css frontend css-animations tailwind-css tailwind-ui

22.11.2022 14:13

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

337

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны заключить параметр blur(0px) в круглые скобки ("blur(0px)"). Вы можете ознакомиться с примерами, представленными на странице документации.

В попутном ветре ключ ключевого кадра должен получить строку в качестве значения:

HTML:

<div class = "bg-red-500 animate-blur"> ~ Blurry text ~ <div>

Конфигурация:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      keyframes: {
        blur: {
          '0%': { filter: "blur(0px)" },
          '100%': { filter: "blur(5px)" },
        }
      },
      animation: {
        blur: 'blur 2s linear infinite',
      }
    },
  },
  plugins: [],
}

Попутный ветер

23.11.2022 13:37