如何用纯CSS实现点击切换效果？替代:active的持久触发方案

问题描述 #

我正在提升HTML和CSS技能，希望仅用CSS实现点击切换样式的效果（点击一次切换，再次点击恢复）。我知道JavaScript的实现方法，但想探索纯CSS方案。之前尝试用:active伪类编写了代码，但效果仅在按住鼠标时生效，松开后就恢复原状，请问仅用CSS是否能实现我要的点击切换效果？

原CSS代码：

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff;
  color: #333;
  font-family: "Open Sans", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #3faf82;
  border-radius: 10px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

.box:hover {
  cursor: pointer;
}

.box:active span:nth-child(1) {
  transform: translate3d(0, 25px, 0) rotate(45deg);
}

.box:active span:nth-child(2) {
  opacity: 0;
}

.box:active span:nth-child(3) {
  transform: translate3d(0, -25px, 0) rotate(-45deg);
}

span {
  margin: auto;
  height: 10px;
  width: 110px;
  background-color: #ffff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-in-out;
}

原HTML代码：

<div class="frame">
  <div class="center">
    <div class="box">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>
</div>

解决方案 #

可以实现，核心是利用表单复选框的:checked伪类来维持点击后的状态，结合兄弟选择器控制目标元素的样式。:active伪类仅在元素被激活（按住鼠标）时生效，松开后状态消失；而:checked是持久状态，点击即可切换，正好匹配你的需求。

修改后的代码如下：

HTML 代码

<div class="frame">
  <div class="center">
    <!-- 添加隐藏的复选框 -->
    <input type="checkbox" id="toggle" class="toggle-checkbox">
    <!-- 用label关联复选框，覆盖整个box区域 -->
    <label for="toggle" class="toggle-label">
      <div class="box">
        <span></span>
        <span></span>
        <span></span>
      </div>
    </label>
  </div>
</div>

CSS 代码

.frame {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  height: 400px;
  margin-top: -200px;
  margin-left: -200px;
  border-radius: 2px;
  box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
  overflow: hidden;
  background: #fff;
  color: #333;
  font-family: "Open Sans", Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #3faf82;
  border-radius: 10px;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 隐藏复选框 */
.toggle-checkbox {
  display: none;
}

/* 设置label为块级元素，确保点击区域覆盖整个box */
.toggle-label {
  display: block;
  cursor: pointer;
}

.box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

/* 利用:checked状态控制box内span的样式 */
.toggle-checkbox:checked + .toggle-label .box span:nth-child(1) {
  transform: translate3d(0, 25px, 0) rotate(45deg);
}

.toggle-checkbox:checked + .toggle-label .box span:nth-child(2) {
  opacity: 0;
}

.toggle-checkbox:checked + .toggle-label .box span:nth-child(3) {
  transform: translate3d(0, -25px, 0) rotate(-45deg);
}

span {
  margin: auto;
  height: 10px;
  width: 110px;
  background-color: #ffff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
  /* 给opacity也加上过渡，让消失效果更平滑 */
}

原理说明 #

1. 隐藏的复选框#toggle用来存储点击状态，点击时切换:checked状态；
2. <label for="toggle">和复选框关联，点击label等同于点击复选框，同时label覆盖整个box区域，保证点击汉堡按钮的任何位置都能触发状态切换；
3. 通过兄弟选择器+和后代选择器，当复选框处于:checked状态时，修改.box内span的样式，实现点击切换效果；
4. 给span的opacity也添加过渡动画，让中间线条的消失效果更流畅。

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