css 设置尾风动画模糊

n1bvdmb6 于 2022-11-27 发布在其他

关注(0)|答案(1)|浏览(178)

如何做自定义动画模糊在顺风

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: [],
}

那对我不起作用。
我想用模糊效果为弹出窗口制作动画

css

来源：https://stackoverflow.com/questions/74533212/tailwindcss-animate-blur

1条答案

按热度按时间

soat7uwm1#

您必须用括号（"blur(0px)"）将blur(0px)参数括起来。您可以查看文档页面上提供的示例。
在tailwind中，关键帧的关键帧需要获取一个字符串作为其值：
于飞：

<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: [],
}

Tailwind-play

赞(0）回复(0）举报 2022-11-27

我来回答

css 设置尾风动画模糊

1条答案

相关问题

热门标签

最新问答