源代码：
下载代码
点击运行
<!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> </head> <body class="p-8"> <h1 class="text-xl font-bold mb-4">will-change-transform 简单演示</h1> <!-- 基础变换演示 --> <div class="mb-8"> <h2 class="font-medium mb-2">1. 悬停缩放效果</h2> <div class="w-32 h-32 bg-blue-500 rounded-lg transition-transform duration-300 hover:scale-125 will-change-transform"> </div> <p class="text-sm text-gray-600 mt-2">这个方块在悬停时会放大，浏览器已预先优化变换性能</p> </div> <!-- 动画演示 --> <div class="mb-8"> <h2 class="font-medium mb-2">2. 旋转动画</h2> <div class="w-32 h-32 bg-green-500 rounded-lg animate-spin will-change-transform"> </div> <p class="text-sm text-gray-600 mt-2">持续旋转的方块，使用 will-change-transform 优化</p> </div> <!-- 对比演示 --> <div> <h2 class="font-medium mb-2">3. 性能对比</h2> <div class="flex space-x-4"> <div class="w-16 h-16 bg-red-500 rounded-lg animate-pulse">无优化</div> <div class="w-16 h-16 bg-purple-500 rounded-lg animate-pulse will-change-transform">有优化</div> </div> <p class="text-sm text-gray-600 mt-2">左右两个元素都在脉动，右侧的添加了 will-change-transform</p> </div> </body> </html>
运行结果：
