主页 / coding / 问题 / 79212531
Accepted
Joel
Asked: 2024-11-22 02:35:07 +0800 CST

无法在 Tailwind CSS 中实现动画功能

  • 772

我想为渐变背景添加动画，但不起作用。如果我用内置类“animate-pulse”替换“animate-gradient”，动画就可以正常工作。

游乐场链接：https://play.tai​​lwindcss.com/XL2lZ4M1Mr?file=config

css

1 个回答

  1. Best Answer

    这是因为您正在使用background-position百分比值更改，但背景渐变的大小与应用它的元素的大小相同。如果我们看看百分比是如何工作的background-position：

    (container width - image width) * (position x%) = (x offset value)
(container height - image height) * (position y%) = (y offset value)

    和(container width - image width)的(container height - image height)计算结果都为0，因此不存在任何偏移。

    您可以考虑使用 CSS 属性使背景图像渐变的大小与其元素的大小不同background-size：

    tailwind.config = {
  mode: 'jit',
  theme: {
    extend: {
      keyframes: {
        'gradient-shift': {
          "0%": {
            "background-position": "0% 50%",
          },
          "50%": {
            "background-position": "100% 50%",
          },
          "100%": {
            "background-position": "0% 50%",
          }
        },
      },
      animation: {
        gradient: 'gradient-shift 15s ease infinite',
      },
    },
  },
  plugins: [],
}
    html,
body {
  background-color: #030303;
  min-height: 100vh;
}
    <script src="https://cdn.tailwindcss.com/3.4.15"></script>

<div class="px-8 py-32">
  <div class="grid gap-8 items-start justify-center">
    <div class="relative group">
      <div class="absolute -inset-6 top-8 right-1 bg-gradient-to-r from-[#0fffc1] to-[#7e0fff] rounded-lg blur-[4vw] opacity-75 animate-gradient" style="background-size: 200% 200%"></div>
      <button class="relative px-7 py-40 bg-black rounded-lg leading-none flex items-center divide-x divide-gray-600">
        <span class="flex items-center space-x-5">
          <span class="pr-6 text-gray-100">Labs Release 2021.09</span>
        </span>
        <span class="pl-6 text-indigo-400">See what's new &rarr;</span>
      </button>
    </div>
  </div>
</div>

    • 1

相关问题