[分享]css3实现滑动按钮

 CSS3是前端开发中非常重要的一部分，它提供了各种强大的功能和特效。在本篇文章中，我们将学习如何利用CSS3实现滑动按钮。.btn { : relative; width: 50px; height...

 CSS3是前端开发中非常重要的一部分，它提供了各种强大的功能和特效。在本篇文章中，我们将学习如何利用CSS3实现滑动按钮。

.btn {
  position: relative;
  width: 50px;
  height: 30px;
  background-color: #dddddd;
  border-radius: 50px;
  transition: all 0.3s ease-out;
}

.btn:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  background-color: #ffffff;
  border-radius: 50px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease-out;
}

.btn.active {
  background-color: #4CAF50;
}

.btn.active:before {
  left: calc(100% - 30px);
  background-color: #ffffff;
} 

首先，我们需要定义一个表示滑动按钮的元素。在这里，我们使用类名`.btn`作为该元素的选择器，并设置一些基础属性，如宽度、高度和背景颜色。此外，我们还为该元素添加了一个边框圆角，以使其看起来更加美观。

接下来，我们需要为该元素添加一个伪元素`::before`。该元素将作为按钮上的可拖动圆球，并包装在按钮元素的内部。我们使用`position: absolute`属性将该圆球定位在按钮的左上角，并设置其宽度、高度、背景颜色和边框圆角。

现在，我们需要对该圆球的位置和背景颜色进行动画处理。为此，我们添加了一个`.active`类，该类将在按钮被点击时添加到按钮元素上。该类将改变按钮的背景颜色，并将圆球移动到按钮的右侧。我们使用`transition`属性来使这些动画变得平滑。同时，我们还设置了圆球的阴影，以增加一些深度和纹理感。

最后，我们如何控制这个按钮呢？ 首先，我们需要用JavaScript定义触发单击事件的函数：

 var btn = document.querySelector('.btn');
   btn.addEventListener('click', function() {
      btn.classList.toggle('active');
   }); 

我们首先得到按钮元素，并在单击事件上添加侦听器。在该事件的处理程序中，我们调用`.classList.toggle()`方法来切换按钮上的`.active`类。这意味着如果按钮已经拥有该类，则它将被删除，否则它将被添加。

在完成上述步骤后，我们的滑动按钮就已经成功地实现了！