Android Studio实现按钮点击动画：变色+弹出回弹效果

嗨！我给你准备了一套直接能用的代码，完美实现你要的点击变色+弹出回弹动画效果，复制到HTML文件里就能直接运行：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Button</title>
    <style>
        /* 基础按钮样式 */
        .animate-btn {
            padding: 12px 24px;
            font-size: 16px;
            font-weight: 600;
            color: white;
            background-color: #4CAF50; /* 初始绿色 */
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            /* 开启硬件加速，让动画更流畅 */
            transform: translateZ(0);
            backface-visibility: hidden;
        }

        /* 弹出回弹动画类 */
        .btn-bounce {
            animation: bounce 0.6s ease-in-out;
        }

        /* 定义回弹动画 */
        @keyframes bounce {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1); /* 弹出幅度，可自行调整 */
            }
            100% {
                transform: scale(1);
            }
        }

        /* 鼠标悬停的轻微效果（可选，可去掉） */
        .animate-btn:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
    <button class="animate-btn">点击我试试</button>

    <script>
        const button = document.querySelector('.animate-btn');
        // 自定义切换的颜色，你可以随便加更多颜色进去
        const colors = ['#4CAF50', '#2196F3', '#FF9800', '#F44336'];
        let currentColorIndex = 0;

        button.addEventListener('click', () => {
            // 循环切换背景色
            currentColorIndex = (currentColorIndex + 1) % colors.length;
            button.style.backgroundColor = colors[currentColorIndex];

            // 添加动画类触发回弹效果
            button.classList.add('btn-bounce');

            // 动画结束后移除类，确保下次点击能重新触发动画
            setTimeout(() => {
                button.classList.remove('btn-bounce');
            }, 600); // 这个时间要和CSS里animation的duration保持一致
        });
    </script>
</body>
</html>

简单自定义说明： #

• 颜色修改：直接修改JS里的colors数组，添加你喜欢的十六进制颜色代码即可
• 动画幅度调整：修改CSS @keyframes bounce里的scale(1.1)，数值越大弹出效果越明显
• 动画时长调整：把CSS里的0.6s和JS里的600改成你想要的数值（注意单位对应：0.6s=600ms）
• 按钮样式调整：可以修改.animate-btn里的padding、font-size、border-radius等参数，自定义按钮的大小、形状和字体样式

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