基础 CSS 厨房水槽开关

CSS是前端开发中不可或缺的一部分，它的作用是用来控制网页的样式和布局。本文将介绍一个基础的 CSS 技巧——厨房水槽开关。

简介

厨房水槽开关是一个利用 CSS 属性和伪元素实现的特效，其样式与一个水槽开关几乎相同，但是当用户点击其开关按钮时，开关按钮表现出旋转和切换的动画效果。

实现

实现基础的水槽开关样式：

.switch {
  width: 100px;
  height: 50px;
  position: relative;
  margin: 100px auto;
  border: 2px solid gray;
  border-radius: 50px;
}

.switch::before {
  content: '';
  height: 46px;
  width: 46px;
  position: absolute;
  top: 2px;
  left: 2px;
  background-color: white;
  border-radius: 50%;
}

.switch::after {
  content: 'OFF';
  height: 46px;
  width: 46px;
  position: absolute;
  top: 2px;
  right: 2px;
  padding-top: 14px;
  text-align: center;
  font-size: 16px;
  color: white;
  background-color: gray;
  border-radius: 50%;
}

以上代码定义了一个 class 名为 switch 的 div 元素，其宽度为 100px，高度为 50px，边框为 2px 实线灰色，边框半径为 50px。除此之外，它还定义了两个伪元素 switch::before 和 switch::after。switch::before 表示开关按钮，其具体样式为灰色的球形，按钮的大小为 46px，其位置与边框的位置有一些小间隙。switch::after 表示开关状态，它的默认状态为 OFF，其样式为 46px 的浅灰色圆形。

接下来，需要添加交互行为，使得按钮状态可以切换。首先，为 .switch 添加一个点击事件，使用 JavaScript 控制按钮的状态：

const switchButton = document.querySelector('.switch');

switchButton.addEventListener('click', function(event) {
  const switchState = switchButton.getAttribute('data-switch-state');
  
  if (switchState === 'off') {
    switchButton.setAttribute('data-switch-state', 'on');
  } else {
    switchButton.setAttribute('data-switch-state', 'off');
  }
});

以上代码使用 addEventListener 引入了一个点击事件，当按钮被点击时，会根据按钮的状态进行切换。data-switch-state 标签用来标记按钮的开关状态，off表示关闭，on表示开启。点击事件会首先取出当前的状态，根据当前状态判断需要切换到的状态，并更新 data-switch-state 标签的值。

接下来，根据按钮的状态设置开关状态的样式：

.switch[data-switch-state="off"]::after {
  content: 'OFF';
  background-color: gray;
  transform: rotateY(0deg);
}

.switch[data-switch-state="on"]::after {
  content: 'ON';
  background-color: #26ca26;
  transform: rotateY(180deg);
}

.switch[data-switch-state="off"]::before {
  left: 2px;
  transform: rotateY(0deg);
}

.switch[data-switch-state="on"]::before {
  left: calc(100% - 46px - 2px);
  transform: rotateY(180deg);
}

以上代码使用 data-switch-state 标签选择被选中的按钮状态，根据其状态分别设置 switch::before 和 switch::after 的 transform 属性和背景颜色，实现开关状态和按钮的动画效果。

总结

厨房水槽开关是一种利用 CSS 属性和伪元素实现的特效，其可以在网站中为用户使用带来更好的交互体验。本文介绍了如何实现一个基础的水槽开关，并通过 JavaScript 进行控制和切换状态。