带有几何动画效果的按钮闲来无事，按钮点击动画练习，仅供参考。animation，animation，animation，

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Geometric Button Animation</title>
    <!-- 引入 CSS 样式 -->
    <style>
        /* 按钮包装器样式 */
        .btn-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: #f0f0f0;
        }
        /* 几何按钮样式 */
        .geometric-btn {
            position: relative;
            padding: 15px 30px;
            font-size: 18px;
            color: #fff;
            background: #2196f3;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            overflow: hidden;
        }
        /* 按钮聚焦时样式 */
        .geometric-btn:focus {
            outline: none;
        }
        /* 方块样式 */
        .square {
            position: absolute;
            background: transparent;
            border: 2px solid rgba(255, 255, 255, 0.8);
            pointer-events: none;
            transform-origin: center center;
        }
        /* 顺时针旋转动画 */
        @keyframes squareClockwise {
            0% {
                opacity: 1;transform: translate(-50%, -50%) rotate(var(--initialRotation)) scale(1);
            }
            50% {
                opacity: 0.8;transform: translate(-50%, -50%) rotate(calc(var(--initialRotation) + 90deg)) scale(0.5);
            }
            100% {
                opacity: 0;transform: translate(-50%, -50%) rotate(calc(var(--initialRotation) + 180deg)) scale(0);
            }
        }
        /* 逆时针旋转动画 */
        @keyframes squareCounterClockwise {
            0% {
                opacity: 1;transform: translate(-50%, -50%) rotate(var(--initialRotation)) scale(1);
            }
            50% {
                opacity: 0.8;transform: translate(-50%, -50%) rotate(calc(var(--initialRotation) - 90deg)) scale(0.5);
            }
            100% {
                opacity: 0;transform: translate(-50%, -50%) rotate(calc(var(--initialRotation) - 180deg)) scale(0);
            }
       }
    </style>
</head>
<body>
    <!-- 按钮包装器 -->
    <div class="btn-wrapper">
        <!-- 几何按钮 -->
        <button class="geometric-btn">Click Me</button>
    </div>
    <!-- 引入 JavaScript 脚本 -->
    <script>
        // 获取按钮元素
        const btn = document.querySelector('.geometric-btn');
        // 为按钮添加点击事件监听器
        btn.addEventListener('click', function(e) {
            // 获取按钮的位置和大小信息
            const rect = btn.getBoundingClientRect();
            // 计算点击位置相对于按钮左上角的坐标
            const x = e.clientX - rect.left;
            const y = e.clientY - rect.top;
            // 创建不同大小的方块
            for(let i = 0; i < 4; i++) {
                // 创建一个 div 元素作为方块
                const square = document.createElement('div');
                // 添加方块类名
                square.className = 'square';
                // 计算方块大小
                const size = Math.max(30 - i * 10, 1);
                square.style.width = `${size}px`;
                square.style.height = `${size}px`;
                // 设置方块的位置
                square.style.left = `${x}px`;
                square.style.top = `${y}px`;
                // 计算初始旋转角度
                const initialRotation = -45 + (i * 45);
                square.style.transform = `translate(-50%, -50%) rotate(${initialRotation}deg)`;
                square.style.setProperty('--initialRotation', `${initialRotation}deg`);
                // 设置动画
                const animationName = i % 2 === 0 ? 'squareClockwise' : 'squareCounterClockwise';
                square.style.animation = `${animationName} 0.75s linear forwards`;
                // 将方块添加到按钮中
                btn.appendChild(square);
                // 动画结束后移除方块
                square.addEventListener('animationend', () => {
                    square.remove();
                });
            }
        });
    </script>
</body>
</html>

CSS 部分

.btn-wrapper：使用 Flexbox 布局将按钮居中显示在页面上，背景颜色为浅灰色。
.geometric-btn：定义按钮的基本样式，包括内边距、字体大小、颜色、背景颜色、边框和圆角等。
.square：定义方块的基本样式，使用绝对定位，背景透明，有白色边框。
@keyframes squareClockwise 和 @keyframes squareCounterClockwise：定义两个关键帧动画分别实现方块顺时针和逆时针旋转并缩小消失的效果。

JavaScript 部分

const btn = document.querySelector('.geometric-btn');：获取按钮元素。
btn.addEventListener('click', function(e) {... });：为按钮添加点击事件监听器。
const rect = btn.getBoundingClientRect();：获取按钮的位置和大小信息。
const x = e.clientX - rect.left; 和 const y = e.clientY - rect.top;：计算点击位置相对于按钮左上角的坐标。
for(let i = 0; i < 4; i++) {... }：循环创建 4 个不同大小的方块。
square.style.animation = ${animationName} 0.75s linear forwards;：为方块添加动画效果。
square.addEventListener('animationend', () => { square.remove(); });：动画结束后移除方块，避免占用过多 DOM 元素。