如何实现登录按钮Hover时切换锁形图标（含动效需求）

核心实现思路 #

借助Heroicons的lock-closed和lock-open原生SVG图标，通过CSS :hover伪类控制图标显隐，搭配过渡动画实现平滑切换；如果需要更逼真的“逐步打开”效果，可拆分锁的部件单独做动画，两种方案都无需额外依赖。

方案一：双图标切换（简洁高效） #

直接用两个完整的锁图标，hover时切换显示并添加动效：

<button class="login-btn">
  <!-- 闭合锁图标 -->
  <svg class="icon lock-closed" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
  </svg>
  <!-- 打开锁图标 -->
  <svg class="icon lock-open" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
    <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5V6.75a4.5 4.5 0 119 0v3.75M3.75 21.75h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H3.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
  </svg>
  <span>登录</span>
</button>

.login-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  position: relative; /* 为绝对定位图标提供参考 */
  transition: background-color 0.2s ease;
}

.login-btn:hover {
  background-color: #2563eb;
}

.icon {
  width: 1.5rem;
  height: 1.5rem;
  transition: all 0.3s ease;
}

/* 初始状态：显示闭合锁，隐藏打开锁 */
.lock-closed {
  opacity: 1;
}
.lock-open {
  opacity: 0;
  position: absolute;
  left: 1.5rem; /* 与闭合锁位置对齐 */
}

/* hover时切换图标状态，添加旋转动效增强质感 */
.login-btn:hover .lock-closed {
  opacity: 0;
  transform: rotate(-10deg);
}

.login-btn:hover .lock-open {
  opacity: 1;
  transform: rotate(10deg);
}

方案二：锁舌单独动画（逼真打开效果） #

如果不想切换整个图标，可把锁的SVG拆分为锁身和锁舌，单独给锁舌做旋转动画：

<button class="login-btn-advanced">
  <svg class="icon lock-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
    <!-- 锁身 -->
    <path stroke-linecap="round" stroke-linejoin="round" d="M-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z" />
    <!-- 锁舌：单独分组，方便控制动画 -->
    <g class="lock-latch">
      <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75" />
    </g>
  </svg>
  <span>登录</span>
</button>

.login-btn-advanced {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background-color: #3b82f6;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.login-btn-advanced:hover {
  background-color: #2563eb;
}

.lock-icon {
  width: 1.5rem;
  height: 1.5rem;
}

/* 锁舌动画设置 */
.lock-latch {
  transform-origin: center bottom; /* 以锁舌底部为旋转中心 */
  transition: transform 0.3s ease;
}

/* hover时锁舌向上旋转，模拟开锁动作 */
.login-btn-advanced:hover .lock-latch {
  transform: rotate(-45deg) translateY(-2px);
}

关键说明 #

• 两种方案均基于Heroicons原生SVG，无需额外引入资源
• 双图标方案实现简单，适合快速开发；锁舌动画方案更贴近真实开锁效果
• 所有过渡动画可通过调整transition的时长和缓动函数，自定义动画节奏

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