如何用CSS/Tailwind实现蒙版单独旋转动画（仿谷歌M3设计）

安全阿岳

2026-6-13

解决方案

要实现仅蒙版旋转而图片不动的效果，核心思路是将蒙版与图片分离，把蒙版放到一个独立的覆盖层元素上，单独对这个层应用旋转动画。下面是基于你现有代码的修改方案：

1. 调整组件结构

在外层添加一个相对定位的容器，将图片和蒙版层分开：

<div className="relative w-[96px] h-[96px] ml-5">
  <Image
    width={96}
    height={96}
    src={podcast.coverImage || "/placeholder.svg"}
    alt={podcast.title}
    className="w-full h-full object-cover rounded-lg"
  />
  {/* 仅在已发布时显示旋转蒙版 */}
  {podcast.isPublished && (
    <div className="absolute inset-0 mask-[url(/image/shape.svg)] mask-cover animate-rotate-mask" />
  )}
</div>

2. 添加旋转动画

方式一：Tailwind CSS 自定义动画

在 tailwind.config.js 中添加自定义动画配置：

/** @type {import('tailwindcss').Config} */
module.exports = {
  // 其他已有配置...
  theme: {
    extend: {
      animation: {
        'rotate-mask': 'rotateMask 2s linear infinite',
      },
      keyframes: {
        rotateMask: {
          from: { transform: 'rotate(0deg)' },
          to: { transform: 'rotate(360deg)' },
        },
      },
    },
  },
}

方式二：原生 CSS 类

如果不用 Tailwind 自定义，直接在全局样式文件中添加：

.animate-rotate-mask {
  animation: rotateMask 2s linear infinite;
}

@keyframes rotateMask {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}