源代码：
下载代码
点击运行
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.tailwindcss.com"></script> <script> tailwind.config = { theme: { extend: { animation: { 'spin-slow': 'spin 3s linear infinite', 'wiggle': 'wiggle 1s ease-in-out infinite', 'ping-slow': 'ping 2s cubic-bezier(0, 0, 0.2, 1) infinite', 'bounce-slow': 'bounce 2s infinite', }, keyframes: { wiggle: { '0%, 100%': { transform: 'rotate(-3deg)' }, '50%': { transform: 'rotate(3deg)' }, } } } } }; </script> </head> <body class="min-h-screen bg-gray-100 p-8"> <div class="max-w-4xl mx-auto"> <h1 class="text-3xl font-bold text-center mb-8">Tailwind CSS 自定义动画演示</h1> <div class="grid grid-cols-1 md:grid-cols-2 gap-8"> <!-- 自定义 spin-slow 动画 --> <div class="bg-white p-6 rounded-lg shadow-md"> <h2 class="text-xl font-semibold mb-4">自定义慢速旋转 (spin-slow)</h2> <div class="flex justify-center items-center h-40"> <div class="w-20 h-20 bg-blue-500 rounded-lg animate-spin-slow"></div> </div> <p class="mt-4 text-gray-600">这个方块使用了自定义的慢速旋转动画 (3秒/圈)</p> </div> <!-- 自定义 wiggle 动画 --> <div class="bg-white p-6 rounded-lg shadow-md"> <h2 class="text-xl font-semibold mb-4">自定义摆动 (wiggle)</h2> <div class="flex justify-center items-center h-40"> <div class="w-20 h-20 bg-green-500 rounded-lg animate-wiggle"></div> </div> <p class="mt-4 text-gray-600">这个方块使用了自定义的摆动动画 (左右摇摆)</p> </div> <!-- 自定义 ping-slow 动画 --> <div class="bg-white p-6 rounded-lg shadow-md"> <h2 class="text-xl font-semibold mb-4">自定义慢速脉动 (ping-slow)</h2> <div class="flex justify-center items-center h-40 relative"> <div class="w-16 h-16 bg-purple-500 rounded-full animate-ping-slow opacity-75"></div> <div class="absolute w-16 h-16 bg-purple-500 rounded-full"></div> </div> <p class="mt-4 text-gray-600">这个圆点使用了自定义的慢速脉动动画 (2秒/次)</p> </div> <!-- 自定义 bounce-slow 动画 --> <div class="bg-white p-6 rounded-lg shadow-md"> <h2 class="text-xl font-semibold mb-4">自定义慢速弹跳 (bounce-slow)</h2> <div class="flex justify-center items-center h-40"> <div class="w-16 h-16 bg-yellow-500 rounded-full animate-bounce-slow"></div> </div> <p class="mt-4 text-gray-600">这个圆点使用了自定义的慢速弹跳动画 (2秒/次)</p> </div> </div> <!-- 组合动画示例 --> <div class="bg-white p-6 rounded-lg shadow-md mt-8"> <h2 class="text-xl font-semibold mb-4">组合动画示例</h2> <div class="flex justify-center items-center h-40"> <div class="w-24 h-24 bg-pink-500 rounded-lg animate-wiggle animate-spin-slow"></div> </div> <p class="mt-4 text-gray-600">这个方块同时应用了摆动和慢速旋转动画</p> </div> <!-- 悬停动画示例 --> <div class="bg-white p-6 rounded-lg shadow-md mt-8"> <h2 class="text-xl font-semibold mb-4">悬停动画示例</h2> <div class="flex justify-center items-center h-40"> <button class="px-6 py-3 bg-indigo-600 text-white rounded-lg hover:animate-wiggle transition-all"> 悬停我会摆动 </button> </div> <p class="mt-4 text-gray-600">鼠标悬停在按钮上时会触发摆动动画</p> </div> </div> </body> </html>
运行结果：
