这种 SVG + CSS 动画技巧对我来说是猫薄荷。 Mikael Ainalem 分享 如何绘制 汉堡图标（你非常熟悉的“三条线”），然后通过控制 CSS 中的 SVG 属性以令人惊讶且有趣的方式对其进行动画处理。
诀窍在于顶部和底部的线条不仅仅是一个直线 <line />，而是一个向上、向下和环绕形成十字形的 <path />。 你只能看到部分线条（使其最初看起来是直线），因为 stroke-dasharray 只显示了部分线条。 然后，通过同时对 stroke-dasharray 和 stroke-dashoffset 进行动画处理，就会形成 ✕。