如何用HTML/CSS复刻苹果iMac页面的Chevron形状动画

我通过Chrome DevTools查看苹果iMac 24英寸页面的源码，在iPhone SE视图下发现一个向下的Chevron图标，点击它会触发带cubic-bezier曲线的CSS动画，同时弹出巨型菜单。我提取了相关HTML/CSS代码，但想知道如何更简洁地复现这个动画效果。

核心简洁复现方案 #

简化后的HTML结构

用原生复选框实现无JS状态控制，去掉冗余嵌套：

<!-- 隐藏的复选框用于控制菜单状态 -->
<input type="checkbox" id="menu-toggle" hidden>
<!-- Chevron图标按钮 -->
<label for="menu-toggle" class="chevron-btn">
  <span class="chevron"></span>
</label>

简化后的CSS代码

用CSS变量统一管理参数，移除苹果页面的专属冗余样式，保留核心动画逻辑：

/* 全局变量：统一控制样式与动画参数 */
:root {
  --chevron-size: 22px;
  --chevron-thickness: 1px;
  --chevron-color: #000;
  --anim-duration: 1s;
  --anim-curve: cubic-bezier(0.86, 0, 0.07, 1);
}

.chevron-btn {
  display: inline-block;
  width: var(--chevron-size);
  height: var(--chevron-size);
  cursor: pointer;
}

.chevron {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  opacity: 0.8;
  transition: transform var(--anim-duration) var(--anim-curve);
  transform: translateY(0);
}

.chevron:hover {
  opacity: 1;
}

/* 用伪元素绘制Chevron的两条斜边 */
.chevron::before,
.chevron::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--chevron-size) / 2);
  height: var(--chevron-thickness);
  background: var(--chevron-color);
  border-radius: var(--chevron-thickness);
  transition: 
    transform var(--anim-duration) var(--anim-curve),
    transform-origin var(--anim-duration) var(--anim-curve);
}

.chevron::before {
  right: 50%;
  transform-origin: 100% 100%;
  transform: rotate(40deg) scaleY(1.1);
}

.chevron::after {
  left: 50%;
  transform-origin: 0% 100%;
  transform: rotate(-40deg) scaleY(1.1);
}

/* 复选框选中时的翻转动画 */
#menu-toggle:checked ~ .chevron-btn .chevron {
  transform: translateY(-8px);
}

#menu-toggle:checked ~ .chevron-btn .chevron::before {
  transform-origin: 100% 0%;
  transform: rotate(-40deg) scaleY(1.1);
}

#menu-toggle:checked ~ .chevron-btn .chevron::after {
  transform-origin: 0% 0%;
  transform: rotate(40deg) scaleY(1.1);
}

/* 可选：深色主题适配 */
.dark-theme .chevron::before,
.dark-theme .chevron::after {
  background: #fff;
}

简化说明 #

1. CSS变量化：把尺寸、颜色、动画参数统一存入变量，方便快速修改和维护；
2. 移除冗余选择器：删除苹果页面专属的布局、多主题嵌套选择器，只保留核心状态控制逻辑；
3. 精简HTML结构：去掉不必要的嵌套容器，直接用input+label实现无JS状态切换；
4. 合并重复代码：将重复的过渡动画属性合并，减少代码冗余；
5. 保留核心动画：完整保留原效果的cubic-bezier曲线，确保动画质感一致。

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