如何在Next.js项目中通过Tailwind CSS实现图片沿圆形路径循环动画

1. 调整Tailwind配置文件 #

首先修正配置中Animation的大小写错误（需为小写animation），补充自定义关键帧和动画规则，修改后的配置如下：

const colors = require('tailwindcss/colors')

module.exports = {
  mode: "jit",
  purge: [ 
    "./src/pages/**/*.{js,ts,jsx,tsx}",
    "./src/components/**/*.{js,ts,jsx,tsx}",
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      colors: {
        navbar: "#1D1F20",
        landingPage : "#034335"
      },
      textColor:{
        "navbar":"#D49F6A"
      },
      keyframes: {
        move: {
          '100%': { 
            motionOffset: '100%',
            offsetDistance: '100%'
          }
        }
      },
      animation: {
        'move': 'move 3s linear infinite',
      },
      animationDelay: {
        '1000': '1s',
        '2000': '2s',
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [require("@tailwindcss/line-clamp")],
};

2. 全局CSS新增路径自定义工具类 #

Tailwind默认未内置offset-path相关工具类，需要在全局CSS文件（通常为styles/globals.css）中补充自定义样式：

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .path-circle {
    motion-path: path('M 200 200 m -200, 0 a 200,200 0 1,0 400,0 a 200,200 0 1,0 -400,0');
    offset-path: path('M 200 200 m -200, 0 a 200,200 0 1,0 400,0 a 200,200 0 1,0 -400,0');
  }
}

上述路径为直径400px的正圆，你可以根据需求调整路径参数修改圆的大小和位置。

3. 调整Next.js组件代码 #

给图片容器添加定位规则，为三张图片分别设置不同的动画延迟实现依次运动的效果，修改后的组件代码如下：

<div className="bg-landingPage h-screen relative">
  {/* ROTATING CLOTHES & TEXTS*/}
  <div className="relative w-[400px] h-[400px] mx-auto">
    {/* CLOTHES */}
    <div>
      <div className="absolute path-circle animate-move">
        <Image
          width={400}
          height={300}
          src="/img/travis/rot1.png"
          alt="rot1"
        />
      </div>
      <div className="absolute path-circle animate-move delay-1000">
        <Image
          width={400}
          height={300}
          src="/img/fearOfGod/rot2.png"
          alt="rot2"
        />
      </div>
      <div className="absolute path-circle animate-move delay-2000">
        <Image
          width={350}
          height={300}
          src="/img/travis/rot.png"
          alt="rot"
        />
      </div>
    </div>
    {/* TEXTS */}
    <div>

    </div>
  </div>

  {/* SLIDE-SHOW OF CLOTHES */}
  <div>

  </div>
</div>

内容的提问来源于stack exchange，提问作者juwie